Question

我已经编写了一些代码，使用引导程序，使用jquery创建一周一目了然的日历视图。我不太确定这是最好的解决方案。我不确定这是最好的实施方案。使用Knockout会更好吗？

将来我将实现应该显示在日历上的客户端创建的事件。我不知道怎么回事？使用jquery附加的混乱似乎对我来说是错误的，即使它有效。

我在谈论那种混乱的jquery。

$('<li>').attr('class', (events[today.format('D')][0] == null ? 'calendar-day' : 'calendar-day-event')).append(
$('<div>').attr('class', 'date').append(
$('<span>').attr('class', 'day').append(
today.format('dddd')).append(", ")).append(
$('<span>').attr('class', 'month').append(
today.format('MMMM')).append(" ")).append(
today.format('D')).append(
$('<a>').attr('href', events[today.format('D')][5]).attr('class', 'event-info').append(
$('<div>').attr('class', 'event-name').append(
events[today.format('D')][4])).append(
$('<div>').attr('class', 'event-time').append(
events[today.format('D')][2])).append(
$('<div>').attr('class', 'location').append(
events[today.format('D')][3])))));

Answer 1

是否因为不熟悉knockout而感到忧虑？即使那些眼神＆＃34;工作＆＃34;这确实是可怕的。以淘汰赛中的相同逻辑为例。

<强> HTML

 <ul class="days" id="days" data-bind='foreach: weekdays'>
    <li data-bind='css: hasEvent() ? "calendar-day-event" : "calendar-day"'>
       <div class='date'> 
          <span class='day' data-bind='text: day() + ","'></span>
           <span class='month' data-bind='text: month'></span>
           <span data-bind='text: date'></span>
           <!--ko foreach:events-->
               <a data-bind='attr:{href: details}'>
                  <div data-bind='text: description'></div>
                  <div data-bind='text: time'></div>
                  <div data-bind='text: location'></div>
                </a>
            <!--/ko-->
        </div>
     </li>
  </ul>

<强>的Javascript

var Day = function (moment, events) {

 var obj = {
  day : ko.observable(moment.format('dddd')),
  month : ko.observable(moment.format('MMM')),
  date : ko.observable(moment.format('D')),
  events : ko.observableArray([]) 
 }

 //if any additional manipulation required...otherwise just use obj.events:ko.observableArray(events)
 $.each(events, function (index, value) {
    obj.events.push(value)
 })
 obj.hasEvent = ko.computed(function () {
    return obj.events().length > 0
 })
 return obj;
}

/*snippet*/

events[24] = [{
  month: "May",
  day: "24",
  time: "3:00 pm - 5:00 pm",
  location: "My house",
  description: "Barbecue for the weekend",
  details: "EventDetail.html"
}];


/*2 pieces together*/
vm.weekdays.push(new Day(today, events[today.format('D')]));

一目了然，代码＆＃34;告诉＆＃34;你在做什么。您不必依赖某些源突出显示来告诉您.append的多个外观的开始和结束位置。虽然可以通过一些源格式来缓解，但这只是一个创可贴。从维护的角度来看，从现在开始的6个月，我不得不看看淘汰赛而不是jQuery。

有关完整实施的信息，请参阅my fiddle。

我有forked the fiddle并提供了添加事件的能力的粗略概括。单击日期数字将启动模态。

需要考虑的一些事项：

如果您多次尝试ko.applyBindings某个元素，您将收到错误消息。您会注意到我使用ko.cleanNode来解决这个问题。
由于template会绑定html，我会在{I}完成后使用.empty()删除它。因此需要重新加载$('#dialog-container')的HTML。
如果您没有.splice直接修改现有事件数组的事件，这将阻止您恢复/忽略对话框中的更改。

使用Knockout的日历？

1 个答案: