Question

我无法弄清楚这一点，这让我疯狂。

我有以下代码（dojo here）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

 <!-- kendo and jquery references -->

  <script>
    window.onload = function(){
    window.viewModel = window.kendo.observable({
                       userSource: [{id: 1, name: "user1" },
                                    {id: 2, name: "user2" },
                                    {id: 3, name: "user3" }],
                       selectedTeam: {
                            users: []
                            }
                       });

    kendo.bind('#main',viewModel);
    }
  </script>

</head>
<body>
  <div id="main">
    <div data-bind="source: userSource, value: selectedTeam" 
         data-template="template">
     <script id="template" type="text/html">
        <input type="checkbox" data-bind="checked: users"/>#:name#<br/>
      </script>
    </div>
  </div>
</body>
</html>

我似乎无法将复选框绑定到 selectedTeam.users

我在这里缺少什么？

Answer 1

当你定义它时，你无法将它绑定到selectedTeam.users，你会在复选框的click上说系统应该更新名为userSource的{{1}}成员{1}}但这不是您想要的，您想要更新不同的数组。

为了显示我的意思，请运行以下代码段。如果您最初点击＆＃34;显示＆＃34;按钮，您将获得已定义的users，但如果您开始标记复选框，则会看到userSource通过名为userSource的新字段进行扩展。

＆＃13;

users

＆＃13;

$(document).ready(function () {   
  var viewModel = window.kendo.observable({
    userSource: [
      {id: 1, name: "user1" },
      {id: 2, name: "user2" },
      {id: 3, name: "user3" }
    ],
    selectedTeam: {
      users: []
    }
  });

  kendo.bind('#main',viewModel);
  $("#show").on("click", function() {
    alert("userSource :" + JSON.stringify(viewModel.userSource));
  });

});

＆＃13;

我不认为你可以按照自己的意愿去做，但你可以得到类似的结果，但取决于你打算如何使用它。

一种可能的解决方案是，当您单击其中一个复选框，然后更新<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script> <button id="show">Show</button> <div id="main"> <div data-bind="source: userSource, value: selectedTeam" data-template="template"> <script id="template" type="text/html"> <input type="checkbox" data-bind="checked: users"/>#:name#<br/> </script> </div> </div>数组。另一个是利用你在selectedTeam.users保存复选框的状态来实现一个方法，每次调用它时，它都会计算所选用户的实际数组。

方法1 ：

userSource

段：

＆＃13;

window.onload = function(){
    window.viewModel = window.kendo.observable({
        userSource: [
            {id: 1, name: "user1" },
            {id: 2, name: "user2" },
            {id: 3, name: "user3" }
        ],
        selectedTeam: {
            users: []
        },
        updateTeam: function(e) {
            if (e.target.checked) {
                alert("Should add '" + e.data.name + "' to the selectedTeam.users array");
            } else { 
                alert("Should remove '" + e.data.name + "' from the selectedTeam.users array");
            }
        }
    });
    kendo.bind('#main',viewModel);
  }

＆＃13;

$(document).ready(function(){
  window.viewModel = window.kendo.observable({
    userSource: [
      {id: 1, name: "user1" },
      {id: 2, name: "user2" },
      {id: 3, name: "user3" }],
    selectedTeam: {
      users: []
    },
    updateTeam: function(e) {
      if (e.target.checked) {
        alert("Should add '" + e.data.name + "' to the selectedTeam.users array");
      } else { 
        alert("Should remove '" + e.data.name + "' from the selectedTeam.users array");
      }
    }
  });

  kendo.bind('#main',viewModel);
})

＆＃13;

方法2

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>

<div id="main">
  <div data-bind="source: userSource, value: selectedTeam" data-template="template">
  </div>
</div>

<script id="template" type="text/html">
  <div>
    <input type="checkbox" data-bind="events: { click: updateTeam }"/>#:name#
  </div>
</script>

片段

＆＃13;

window.onload = function(){
    window.viewModel = window.kendo.observable({
        userSource: [
            {id: 1, name: "user1" },
            {id: 2, name: "user2" },
            {id: 3, name: "user3" }
        ],
        selectedTeam: function() {
            var users = [];
            $.each(this.userSource, function(idx, elem) {
                if (elem.users) users.push(elem.name);
            });
            return users;
        }
    });
    kendo.bind('#main',viewModel);
  }

＆＃13;

$(document).ready(function(){
  var viewModel = window.kendo.observable({
    userSource: [
      {id: 1, name: "user1" },
      {id: 2, name: "user2" },
      {id: 3, name: "user3" }],
    selectedTeam: function() {
      var users = [];
      $.each(this.userSource, function(idx, elem) {
        if (elem.users) users.push(elem.name);
      });
      return users;
    }
  });

  kendo.bind('#main',viewModel);

  $("#show").on("click", function() {
    alert("Selected Team: " + JSON.stringify(viewModel.selectedTeam()));
  });
});

＆＃13;

KendoUI构建一个MVVM绑定复选框列表

1 个答案: