Knockout JS-获取一个模式弹出窗口来编辑项目

Knockout JS - Geting a modal popup to edit items

本文关键字：窗口 项目 编辑 模式 一个 获取 JS- Knockout      更新时间：2023-09-26

我是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>

我制作了一个模板，每行都有一个类似于示例的编辑按钮，但还没有完成绑定功能。现在我想做的是简单地将所选数据上传到我的模态，并显示我的模态如下：

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

这是我最挣扎的一步。有人能为我提供任何清晰的文件吗？例如，提示或任何类型的帮助，让我从这里走上正确的方向。

假设它们在这样的列表中：

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

我建议更新你的视图模型，使其看起来像这样：

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
}

最后一块将使用KO的绑定来包装您的模式

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

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

如果你是新手，这里有很多，但使用current风格的可观察来跟踪列表中的单个数据是Knockout使用的一个很好的范例=）

p.Shttp://learn.knockoutjs.com/如果你还没有这样做的话，教程真的很好。

相关文章：