如何在Bootstrap主題下拉列表中使用KnockoutJS進行foreach綁定

我正在開發一個類似通知的小模塊，用戶可以在其中看到他在數據庫（MSSQL）中記錄的5個最新活動。我需要的值都在那裏，但由於某些原因，敲除綁定不起作用。這裏是代碼片段：如何在Bootstrap主題下拉列表中使用KnockoutJS進行foreach綁定

<div class="dropdown-menu toolbar pull-right" data-bind="with: layoutLogsModel"> 
    <h3 style="border: none;">Recent activities:</h3> 
    <!-- "mailbox-slimscroll-js" identifier is used with Slimscroll.js plugin --> 
    <ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: layoutLogsModel.notification"> 
    <div class="alert inbox"> 
     <a href="javascript:void(0)"> 
     <i class="icon-book" style="color: orange;"></i> 
     Some text 
     </a> 
     <br> 
     Some text #2 
    </div> 
    </ul>  
</div>

現在，我只想顯示在observableArray中的每個項目的隨機文本。視圖模型如下：

var layoutLogsModel = {  
    notification: ko.observableArray() 
}; 

function getLastFiveActivities() { 
    get(apiUrl + "Logs/GetLastFiveActivities", { ClientUserID: loggedUserID }, function (data) {   
     layoutLogsModel.notification(data); 
    }); 
}

每一次我調用這個函數時，列表爲空（IMAGE）（函數被調用的點擊，絕對沒有錯誤控制檯中顯示）。

這是什麼，我做錯了？

編輯：

的事情是，我忘了該視圖模型執行ko.applyBindings。然後，我改變了HTML看起來像這樣：

<ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: notification"> 
            <div class="alert inbox"> 
             <a href="javascript:void(0)"> 
              <i class="icon-user" style="color: green;"></i> 
              <span data-bind="text: $data"></span> 
             </a> 
            </div> 
           </ul>

ASLO，我稍微修改get函數，就像這樣：

function getLastFiveActivities() { 
get(apiUrl + "Logs/GetLastFiveActivities", { ClientUserID: loggedUserID }, function (data) {   
    layoutLogsModel.notification(data.Notification);   
});

}

（改變data到data.Notification基礎上，包含數組的MVC模型屬性）畢竟，數據立即可用。

來源

2014-02-06 Milan Stojanovic

嘗試從foreach中刪除layoutLogsModel，您已經在綁定「with」中使用它，因此該div中的eveything將成爲layoutLogsModel的一部分。

<div class="dropdown-menu toolbar pull-right" data-bind="with: layoutLogsModel"> 
    <h3 style="border: none;">Recent activities:</h3> 
    <!-- "mailbox-slimscroll-js" identifier is used with Slimscroll.js plugin --> 
    <ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: notification"> 
    <div class="alert inbox"> 
     <a href="javascript:void(0)"> 
     <i class="icon-book" style="color: orange;"></i> 
     Some text 
     </a> 
     <br> 
     Some text #2 
    </div> 
    </ul>  
</div>

來源

2014-02-06 16:00:02 Beelphegor

是的，我做了這樣的事情，我會在原始問題的編輯中發佈它。 –

如何在Bootstrap主題下拉列表中使用KnockoutJS進行foreach綁定

回答

相關問題