javascript - Knockout JS - 获取模式弹出窗口以编辑项目

Question

我是 knockoutJS 的新手并且非常喜欢它。我正在尝试构建与此非常相似的东西 http://jsfiddle.net/mac2000/N2zNk/light/ .我尝试复制代码并根据需要进行调整。问题是我使用 $.getJSON 从服务器获取数据，jsfiddle 示例似乎是针对不同格式的数据制作的，这让我很困惑。

因此，我没有寻求帮助来查找我的代码中的问题，而是采用了不同的方法。希望你们不要介意。我从头开始并尝试学习每个步骤，以便我知道我在做什么。

到目前为止，这是我的代码，它非常适合简单地在我的表格上显示我的数据。

<script type="text/javascript">
     function EmployeeModal() {
         var self = this;
         self.Employees = ko.observableArray([]);
         $.getJSON("../../../../_vti_bin/listData.svc/GDI_PROD_Incidents?$filter=ÉtatValue%20ne%20%27Fermé%27&$orderby=PrioritéValue desc",
             function (data) {
                 if (data.d.results) {
                     self.Employees(ko.toJS(data.d.results));
                 }
             }
       );
     }
     $(document).ready(function () {
         ko.applyBindings(new EmployeeModal());
     });

</script>

我制作了一个模板，其中每一行都有一个类似于示例的编辑按钮，但尚未完成绑定(bind)功能。现在我想做的只是简单地将选定的数据传递到我的模态并像这样显示我的模态:

$('#myModal').modal('show'); 

这是我最挣扎的一步。是否有任何关于菜鸟或示例的清晰文档、提示或任何类型的帮助，我会从这里开始朝着正确的方向前进。

Answer 1

假设您将它们放在这样的列表中:

<ul data-bind="foreach: Employees">
     <li data-bind="text: fullName, click: showEmployee"/>
</ul>

我建议将您的 View 模型更新为如下所示:

function EmployeeModal() {
     var self = this;
     self.Employees = ko.observableArray([]);

     self.currentEmployee = ko.observable(null);
     self.showEmployee = function(vm){
         self.currentEmployee(vm);
         $('#myModal').modal('show');
     };
     .... // rest of your view model here
}

最后一 block 将使用 KO 的 with binding包装你的模态

<div class="modal" id="myModal" data-bind="with: currentEmployee">
    <h1 data-bind="text: fullName"></h1>
</div>

它的作用是监听单个元素上的点击事件，并自动将绑定(bind)到该元素的 View 模型传递给您定义的点击处理程序。然后我们采用该 View 模型，将其存储在自己的可观察对象中，然后像正常一样显示模态。这里的关键是 with 绑定(bind)，它仅在 observable 中存储数据时执行，并将所有嵌套代码的上下文设置为存储在 currentEmployee 中的员工。

如果您是新手，那里有很多东西，但是使用 current 样式的可观察对象来跟踪列表中的单个数据是与 Knockout = ) 一起使用的一个很好的范例

附:http://learn.knockoutjs.com/如果您还没有完成教程，那么教程真的很棒。