使用淘汰賽的日曆？

Question

我寫了一些代碼，使用jquery創建一週一覽日曆視圖，該視圖也使用引導程序進行響應。我不太確定這是最好的解決方案。我不確定這是最好的實現。使用Knockout會更好嗎？

將來我會實現應該顯示在日曆上的客戶端創建的事件。我不知道如何去做這件事？我用jquery附加亂七八糟的東西似乎對我來說是錯誤的，即使它起作用。

Here's a link to jsfiddle.

這裏的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？即使那雙眼鏡「行得通」，它的確是可怕的。舉例來說，在淘汰賽中採用相同的邏輯。

的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')])); 

一目瞭然碼 「告訴」 你它在做什麼。您不必依賴某些源高亮來告訴您.append的多次出現開始和結束的位置。當然可以通過一些源格式化來緩解，但那只是一種創可貼。從維護的角度來看，從現在開始的6個月我寧願看看淘汰賽，而不是jQuery。

查看my fiddle全面實施。

---

我有forked the fiddle並提供了添加事件的能力的粗略概括。點擊日期數字將啓動模式。

有幾件事情要考慮：

• 如果試圖ko.applyBindings超過一次，你會得到一個錯誤的更多的元素。你會注意到我使用ko.cleanNode來解決這個問題。

• 由於template已經綁定了html，所以我用.empty()來完成它。因此需要重新加載$('#dialog-container')的html。

• 如果您沒有.splice事件，您將直接修改現有的事件數組，這將阻止您有能力恢復/忽略對話框中的更改。