Question

请考虑以下观点：

<p>Count <span data-bind="text: unreadCount()">&nbsp;</span></p>
<div data-bind='template: { name: "conversationTemplate", data: currentList }'> </div>
<script type="text/html" id="conversationTemplate">
 <table>
  <tbody>
   {{each $data}}
    <tr id="conversation_${conversation_id}" class="conversation-item ${status}">
     <td><input type="checkbox" data-bind="click: function() { alert(this.value) }, checked: read" /></td>
    </tr>
   {{/each}}
  </tbody>
 </table>
</script>

以下代码：

$(function() {

 var viewModel = {
  currentList : ko.observableArray([])
 };

 ko.dependentObservable(function () {
  $.ajax({
   url: '/conversations/inbox.json', dataType: 'json',
   success: function(data) {
    viewModel.currentList(data.conversationlist);
   }
  });  
 }.bind(viewModel));

 viewModel.unreadCount = ko.dependentObservable(function() {
  var unreadCount = 0;
  for (var i = 0; i < viewModel.currentList().length; i++)
   if (viewModel.currentList()[i].read == true) {
    unreadCount++;
   }
  return unreadCount;
 });

 ko.applyBindings(viewModel);

上面似乎有效，但我不确定我是否正确构建了这个。我想要学习的是当您更改复选框时，如何自动更新unreadCount以反映更改。我认为使用ko会自动提供这个，但也许我需要在模板的复选框数据绑定中做一些事情？

此外，我可以修改复选框并自动更新View Model＆amp;未读计数，然后将该更新发回服务器（Rails）的正确方法是什么？

以下是来自服务器的示例JSON响应：

{
    "conversationlist": [{
        "project_name": "Proj 1",
        "preview": "xxxxx",
        "status": "unread",
        "participants": [{
            "image": "XXXXXX"
        }, {
            "image": "XXXXXX"
        }],
        "conversation_id": 193,
        "title": "Hi Ho",
        "time_ago": "1 day",
        "read": true
    }, {
        "project_name": "Proj 2",
        "preview": "xxxx",
        "status": "unread",
        "participants": [{
            "image": "XXXXXX"
        }, {
            "image": "XXXXXX"
        }],
        "conversation_id": 193,
        "title": "Hi Ho",
        "time_ago": "1 day",
        "read": true
    }, {
        "project_name": "Proj 3",
        "preview": "xxxxx",
        "status": "unread",
        "participants": [{
            "image": "XXXXXX"
        }, {
            "image": "XXXXXX"
        }],
        "conversation_id": 193,
        "title": "Hi Ho",
        "time_ago": "1 day",
        "read": true
    }]
}

Answer 1

似乎你可以对click（内部data-bind='click: function() {...}'）执行一个函数，为每个项目增加或减少未读计数器，具体取决于所选复选框的值。这样，您就不必循环遍历currentList并以这种方式更新未读计数。

您还可以显式订阅viewmodel的read属性，并在read更改时执行您自己的代码（请参阅observables documentation中间的“明确订阅observable”）。

编辑：Here's一个线程，其中一个用户描述他们如何使用具有可观察属性的项目设置可观察数组。 Here是一个例子，作者（史蒂夫桑德森）想出了一个具有可观察属性的可观察数组。

使用这两种方法，您似乎可以执行一个AJAX调用POST回服务器。

更新：以下是如何实施此操作的示例：

$(function() {
    var initialData = {/*Data retrieved by AJAX or on page load*/};

    var markRead = function(conversation) {
        // Make AJAX POST here to update read status of
        // the conversation
    };

    // Convenience object for conversations.
    var Conversation = function(conversation_id, status, read) {
        this.conversation_id = conversation_id;
        this.status = status;
        this.read = ko.observable(read);
    };

    var initialUnread = 0;

    var viewModel = {
        // Map the conversation list to a new array containing
        // objects with observable properties.
        conversationList: ko.observableArray(ko.utils.arrayMap(
        initialData.conversationlist, function(data) {
            if (!data.read === false) {
                initialUnread++;
            }
            return new Conversation(
                data.conversation_id,
                data.status,
                data.read);
        })),
        unreadCount: ko.observable(initialUnread),

        // Executed when the user toggles a conversation's
        // read status.
        toggleRead: function(conversation) {
            // Update the unread count.
            viewModel.unreadCount(
                viewModel.unreadCount() + 
                (conversation.read() ? 1 : -1));

            // Update the conversation via AJAX
            markRead(conversation);
            return true;
        }
    };
    ko.applyBindings(viewModel);
});

<强> Demo here

注意：

不使用映射插件。一般逻辑应该是相同的。
如果AJAX调用失败，您可能应该在单击之前更新复选框及其状态。
您可以通过调用unreadCount在任何地方更新viewModel中的viewModel.unreadCount(<value>)属性。
这是基于几个例子，特别是this one。复杂的例子特别令人大开眼界，展示了你可以用KO做的一些很酷的东西。

如何修改fromJSON的值

1 个答案: