如何修改值fromJSON

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会自动提供这个功能，但是也许我需要在模板的复选框数据绑定中做些什么呢？

此外，一旦我可以修改复选框并自动更新视图模型&未读计数，那么将更新发布回服务器(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

似乎您可以在点击上(在data-bind='click: function() {...}'中)对每个增加或减少未读计数器的项执行一个函数，这取决于被选中的复选框的值。这样，您就不必循环遍历currentList并以这种方式更新未读计数。

您还可以显式地订阅viewmodel的read属性，并在read更改时执行自己的代码(请参阅可观测文件中间的“显式订阅可观察性”)。

编辑：下面是是一个线程，其中一个用户描述了他们如何使用具有可观察属性的项来设置可观察数组。这里是作者( Sanderson)提出的一个例子，它演示了一个具有可观察属性的可观测数组。

使用这两种方法，您似乎可以执行AJAX调用来回发到服务器。

Update：下面是如何实现此功能的示例：

$(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);
});

这里的演示.

备注：

• 不使用映射插件。不过，总的逻辑应该是一样的。
• 如果AJAX调用失败，您可能应该在单击之前更新复选框及其状态。
• 您可以通过调用unreadCount来更新viewModel中任意位置的viewModel.unreadCount(<value>)属性。
• 这是基于几个例子，特别是这一个。复杂的例子特别令人眼花缭乱，展示了一些你可以用KO做的很酷的事情。