如何查找代码中的行并使用KnockoutJS更改跨度值？

Question

我有以下HTML代码绑定的JSON调用的成员列表。这工作正常，但我现在想要找到一个基于MemberId的行并更改代码中的名称。

<ul data-bind="foreach: { data: members}"> 
    <li> 
     <span data-bind="text: $index"></span> 
     <span data-bind="text: $data.Name"></span> 
     <span data-bind="text: $data.MemberId"></span> 
    </li> 
</ul> 

<button id="btnChange">Change</button> 

<script> 
    $(function() { 
     $.getJSON("/home/memberlist", function(data) { 
      var viewModel = { 
       members: ko.observableArray(data), 
      }; 
      ko.applyBindings(viewModel); 
     }); 

     $('#btnChange').click(function() { 
      //I would like to find the row that is a match for a MemberId 
      // and change the name.... 
     }); 

    }); 
</script> 

Answer 1

如果希望数据更改反映在页面上，则必须使该数据可观察。这意味着将原始服务器数据映射到具有可观察属性的对象。

下面这段代码做到这一点：

// define a Member class 
function Member(data) { 
    this.MemberId = ko.observable(data.MemberId); 
    this.Name = ko.observable(data.Name); 
} 
Member.prototype.changeName = function() { 
    var newName = prompt("New name?", this.Name()); 
    if (newName) { 
     this.Name(newName); 
    } 
}; 

$(function() { 
    $.getJSON("/home/memberlist") 
    .then(function(rawData) { 
     return ko.utils.arrayMap(rawData, function (instanceData) { 
      return new Member(instanceData); 
     }); 
    }) 
    .done(function(mappedData) { 
     ko.applyBindings({ 
      members: observableArray(mappedData), 
      changeRandomName: function() { 
       var members = this.members(), 
        random = getRandomInt(0, members.length - 1); 

       members[random].changeName(); 
      } 
     }); 
    }); 
}); 

// courtesy of http://stackoverflow.com/a/1527820 
function getRandomInt(min, max) { 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
} 

和

<ul data-bind="foreach: members"> 
    <li> 
     <span data-bind="text: $index"></span> 
     <span data-bind="text: Name"></span> 
     <span data-bind="text: MemberId"></span> 
    </li> 
</ul> 
<button data-bind="click: changeRandomName">Change</button> 

注...

• 简单的foreach结合
• 简单的text绑定（有是没有必要的在大多数情况下使用$data。它是隐含的。）
• 使用click结合，而不是jQuery的事件处理程序（一件事你通常应该尝试在淘汰赛应用程序做的。做尽可能多，你可以内淘汰赛。）
• 使用jQuery的委托功能（then()和done()）改造和使用Ajax的结果 - 这是比使用成功回调模型

Answer 2

你可以做这样的事情

<li id="$data.MemberID"> 
    ... 
</li> 

$('#btnChange').click(function() { 

    $("#memberID") 
    //Then get the second child and or set a class of name to the span and do 
    // $("#memberID > .name") 
    // to get the html node that you want 
}); 

Answer 3

首先，由于您使用的淘汰赛，我想你应该按钮元素上使用的click binding handler。您编写的代码正是敲除尝试通过通用脚本部分（不作用域）通过id绑定事件。

@BenjaminDavid是对的。要查找html元素，您必须创建可搜索的内容（例如，行元素上的id属性）。再次，有一个淘汰赛binding handler to apply values to attributes。

代码的id应用于行元素会是这样的：

<ul data-bind="foreach: { data: members}"> 
    <li data-bind="attr: {id: $data.MemberId}"> 
     <span data-bind="text: $index"></span> 
     <span data-bind="text: $data.Name"></span> 
     <span data-bind="text: $data.MemberId"></span> 
    </li> 
</ul> 

如果你想要的是改变一个成员的名字，那么你不应该使用HTML在所有的工作。您应该在“内存中”集合中找到该成员，并直接更改该值。数据将在UI中更新（如果该属性是可观察的）。