In einer Kindansicht aus der Elternansicht auf Klick oder tippen Ereignis in TI

Question

In Appcelerator TI-Code - Ich habe eine Monat scrollbare Ansicht, zu der ich Wochenansichten hinzugefügt habe und zu denen ich Tage als Ansichten hinzugefügt habe.

Die Erwartung auf Klickereignis eines Tages sollte ich Eigenschaften des Datums abrufen können. Jedoch auf SingleTap Veranstaltung, die ich Bezug auf die Woche Ansicht bin immer und nicht in der Lage, das Kind Ansicht „Tage Ansicht zu erhalten. Wie kann ich einen Verweis auf die Tage, an einzelnen tippen Sie auf Ereignis klicken?

Code -Widget.js 


var args = arguments[0] || {}; 
var Moment = require('alloy/moment'); 

var ROWS = 6; 
var COLUMNS = 7; 

_.defaults(args, { 

    // Data 
    current_date: Moment(), 
    active_dates: [], 
    min_date: Moment().subtract(6, 'months'), 
    max_date: Moment().add(6, 'months'), 

    // Style 
    backgroundColor: 'transparent', 
    dateBackgroundColor: 'transparent', 
    todayBackgroundColor: '#af80', 
    dateTextColor: '#fff', 
    todayTextColor: '#000', 
    activePinColor: '#f39911', 
    inactivePinColor: 'transparent', 
    selectedBackgroundColor: '#60f39911', 
    fontFamily: '', 

    // Behaviour 
    allowInactiveSelection: false, 
    fillMonth: false, 
    enablePastDays: false 

}); 

var active_dates = args.active_dates ? getMomentDates(args.active_dates) : []; 
var current_page = 0; 

///////////// 
// Methods // 
///////////// 

function refreshArrows() { 
    $.leftBtn.opacity = current_page <= 0 ? 0.4 : 1; 
    $.rightBtn.opacity = current_page >= $.monthScroll.views.length - 1 ? 0.4 : 1; 
} 

function getDayLabels() { 
    var days = Moment.weekdaysMin(); 
    days.push(days.shift()); // Moment week has Sunday at index 0 
    _.each(days, function(day, i) { 
     var width = Math.floor($.calendar.rect.width/COLUMNS); 
     var $label = $.UI.create('Label', { 
      classes: ['dayLabel'], 
      width: width, 
      text: day.charAt(0), 
      left: i * width, 
      font: { 
       fontFamily: args.fontFamily 
      } 
     }); 

     $.dayLabels.add($label); 
    }); 
} 

function getMomentDates(dates) { 
    return _.map(dates, function(date) { 
     return Moment(date); 
    }); 
} 

function isInMomentsList(date, dates) { 
    return _.find(dates, function(day) { 
     return date.isSame(day, 'day'); 
    }); 
} 

function getDayContainer(number) { 
    var $this = $.UI.create('View', { 
     classes: ['day'], 
     width: Math.floor($.monthScroll.rect.width/COLUMNS), 
     height: Math.floor($.monthScroll.rect.height/ROWS), 
     backgroundColor: args.dateBackgroundColor, 
     opacity: 1, 
     date: null, 
     active: null, 
    }); 
    $this.add($.UI.create('Label', { 
     classes: ['dayNumber'], 
     color: '#fff', 
     text: number, 
     font: { 
      fontFamily: args.fontFamily 
     } 
    })); 
    $this.add($.UI.create('View', { 
     classes: ['dayDot'], 
     backgroundColor: 'transparent' 
    })); 

    return $this; 
} 

function setItemDate($item, date) { 
    $item.date = date; 
    $item.children[0].text = date.date(); 
} 

function setItemActive($item, active) { 
    $item.active = active; 
    $item.children[1].backgroundColor = active ? args.activePinColor : args.inactivePinColor; 
} 

function setItemToday($item, is_today) { 
    $item.backgroundColor = is_today ? args.todayBackgroundColor : args.dateBackgroundColor; 
    $item.children[0].color = is_today ? args.todayTextColor : args.dateTextColor; 
} 

function setItemCurrent($item, current) { 
    $item.opacity = current ? 1 : 0.5; 
} 

function getMonthView(month, year) { 
    var month_rows = []; 
    var start_date = Moment().month(month).year(year).startOf('month').startOf('week'); 
    var end_date = Moment().month(month).year(year).endOf('month').endOf('week'); 

    // Month skeleton 
    var $month_view = $.UI.create('View', { 
     classes: ['month'], 
     month: month, 
     year: year, 
     backgroundColor: args.backgroundColor, 
     ready: false 
    }); 

    // Month activity indicator 
    var $loader = Ti.UI.createActivityIndicator({ 
     style: OS_IOS ? Ti.UI.iPhone.ActivityIndicatorStyle.BIG : Ti.UI.ActivityIndicatorStyle.BIG, 
     center: { 
      x: '50%', 
      y: '50%' 
     } 
    }); 
    $month_view.add($loader); 
    $month_view.__loader = $loader; 
    $loader.show(); 

    return $month_view; 
} 

function buildMonth($month_view, dates) { 
    if (!$month_view || $month_view.ready) return; 
    var start_date = Moment().month($month_view.month).year($month_view.year).startOf('month').startOf('week'); 
    var end_date = Moment().month($month_view.month).year($month_view.year).endOf('month').endOf('week'); 
    var $days_container = Ti.UI.createView({ 
     height: Ti.UI.FILL, 
     width: Ti.UI.FILL 
    }); 

    // Separators 
    for (var i = 0; i < ROWS; i++) { 
     $days_container.add($.UI.create('View', { 
      classes: ['hr'], 
      top: (i+1) * Math.floor($.monthScroll.rect.height/ROWS) 
     })); 
    } 

    // Add day containers 
    for (var d = 0; d < ROWS*COLUMNS; d++) { 
     var curday = Moment(start_date).add(d, 'days'); 
     // If fillMonth is disabled, add only this month's days 
     if (curday.month() === $month_view.month || args.fillMonth == true) { 
      var $curview = getDayContainer(curday.date()); 
      var row = Math.floor(d/COLUMNS); 
      var col = d % COLUMNS; 

      setItemDate($curview, curday); 
      setItemActive($curview, isInMomentsList(curday, dates)); 
      setItemCurrent($curview, !curday.isBefore(Moment(), 'day') || (args.enablePastDays == true && (curday.month() === $month_view.month))); 
      setItemToday($curview, curday.isSame(Moment(), 'day')); 

      $curview.top = row * ($curview.height); 
      $curview.left = col * ($curview.width); 

      $days_container.add($curview); 
     } 
    } 

    $month_view.add($days_container); 
    $month_view.ready = true; 
    $month_view.__loader.hide(); 
} 

function buildCalendar() { 
    $.main.removeEventListener('postlayout', buildCalendar); 

    // Add top labels 
    getDayLabels(); 
    // Create the calendar views 
    var curmonth_index = -1; var i = 0; 
    for (var m = Moment(args.min_date); m.diff(Moment(args.max_date)) <= 0; m.add(1, 'months')) { 
     if (m.isSame(Moment(), 'month')) curmonth_index = i; 
     var monthview = getMonthView(m.month(), m.year()); 
     $.monthScroll.addView(monthview); 
     i++; 
    } 

    $.monthScroll.currentPage = current_page = curmonth_index > 0 ? curmonth_index : 0; 
    refreshCalendarMonth(current_page); 
    refreshArrows(); 
} 

function refreshCalendarMonth(m) { 
    var month_date = Moment().month($.monthScroll.views[m].month).year($.monthScroll.views[m].year); 

    $.monthName.text = month_date.format('MMMM').toUpperCase(); 
    $.monthYear.text = month_date.format('YYYY'); 

    buildMonth($.monthScroll.views[m], args.active_dates); 

    if (current_page - 1 > -1) buildMonth($.monthScroll.views[m-1], args.active_dates); 
    if (current_page + 1 < 12) buildMonth($.monthScroll.views[m+1], args.active_dates); 
} 

/////////////// 
// Listeners // 
/////////////// 

$.main.addEventListener('postlayout', buildCalendar); 

$.monthScroll.addEventListener('scroll', function(e) { 
    if (e.currentPage === current_page) return; 
    current_page = e.currentPage; 
    refreshArrows(); 
    refreshCalendarMonth(current_page); 
}); 

$.monthScroll.addEventListener('click', function(e) { 
    if (!e.source.date || (!e.source.active && !args.allowInactiveSelection) || (args.enablePastDays == false && e.source.date.isBefore(Moment(), 'day'))) return; 

    e.source.animate({ backgroundColor: args.selectedBackgroundColor, duration: 150, autoreverse: true }); 

    $.trigger('selected', { 
     date: e.source.date, 
     active: e.source.active 
    }); 
}); 

$.leftBtn.addEventListener('click', function() { 
    $.monthScroll.movePrevious(); 
}); 

$.rightBtn.addEventListener('click', function() { 
    $.monthScroll.moveNext(); 
}); 

////////// 
// Init // 
////////// 

$.monthName.font = { 
    fontFamily: args.fontFamily, 
    fontWeight: 'bold' 
}; 
$.monthYear.font = { 
    fontFamily: args.fontFamily, 
    fontWeight: 'light' 
}; 

Widget. xml

<Alloy> 
    <Window backgroundColor="#110ee1" class="container" exitOnClose="true" id="widget" title="DailyRead" top="0"> 
    <View id="main"> 
     <View class="bar" id="header"> 
      <View class="hr" top="0"/> 
      <View class="ctrlBtn" id="leftBtn"> 
       <ImageView id="leftArrow"/> 
      </View> 
      <View class="headerText"> 
       <Label id="monthName"/> 
       <Label id="monthYear"/> 
      </View> 
      <View class="ctrlBtn" id="rightBtn"> 
       <ImageView id="rightArrow"/> 
      </View> 
      <View bottom="0" class="hr"/> 
     </View> 
     <View class="sp1/2"/> 
     <View id="calendar"> 
      <View id="dayLabels"/> 
      <View backgroundColor="#fff" class="hr" height="2"/> 
      <ScrollableView id="monthScroll"/> 
     </View> 
    </View> 
    </Window> 
</Alloy> 

Answer 1

Soweit ich die Frage verstand ich weitere Informationen zur Tagesansicht hinzufügen würde. zum Beispiel, wenn Sie alles durch eine Schleife erstellen fügen Sie einfach Monat, Woche zur Tagesansicht als Eigenschaft. Stellen Sie dann alle Ansichten aber die Tagesansicht zu touchEnabled:false und fügen Sie einfach das Klickereignis zur Tagesansicht hinzu, dann können Sie event.source.day/event.source.week/event.source.month innerhalb des click-Ereignisses lesen

Wenn das nicht hilft, fügen Sie bitte einen Beispielcode zu Ihrer Frage hinzu.