Knockout复选框使用Typescript

时间:2016-12-01 15:49:23

标签: javascript typescript knockout.js

上下文:我有一个包含检查列表的表。每个检查都有一个复选框,表格本身在顶部有一个“全选”复选框。复选框的目的是打印支票。

我目前有select all复选框工作 - 它将所有检查添加到selectedChecks ko.observable数组以及checkID到CheckIDs数组。服务器的打印功能使用checkID列表。

我遇到的问题是添加和删除单个检查/ checkID ..我不知道如何确定check / checkID是否已经在数组中,如果是,如何删除它。这是代码,包含视图等。

免责声明:我可能已经在考虑如何设置所有阵列了。

感谢您的帮助。

观点:

date       | case_type | case_model | click_n_view | display
YYYY-MM-DD | string_A  | string_B   | INT          | INT

打字稿:

 <table class="details_table" data-bind="visible: vendorChecks().length">
    <thead>
        <tr>
            <th>Check ID
            </th>
            <th>Check Date
            </th>
            <th>Vendor Name
            </th>
            <th>Check Amount
            </th>
            <th>Approve Status
            </th>
            <th>
                <input type="checkbox" data-bind="checked: selectAllChecks" title="Select all/none"/>
            </th>

        </tr>
    </thead>
    <tbody class="nohighlight" data-bind="foreach: $root.vendorChecks">
        <tr>
            <td><span data-bind="text: $data.CheckID"></span></td>
            <td><span data-bind="text: CheckDate"></span></td>
            <td><span data-bind="text: VendorName"></span></td>
            <td><span data-bind="text: FormatCurrency(CheckAmount())"></span></td>
            <td><span data-bind="text: Globalize.formatCheckRunApproveStatus(ApprovalStatusID())"></span></td>
            <td>
                <input type="checkbox" class="print_line_checkbox" data-bind="checkedValue: $data, checked: $root.chosenChecks(), click: $root.addCheck"/>
            </td>
        </tr>
    </tbody>
</table>

1 个答案:

答案 0 :(得分:1)

我建议不要在你的逻辑中找到错误,而是建议采用稍微不同的结构:

  • 在每个项目中放置一个function addNewPhotos(_id, files) { var deferred = Q.defer(); var new_photos = []; var todo = files.length; var done = 0; _.each(files, function (one) { var data = [ one.path, _id, 0 ] var sql = 'INSERT INTO photos(photo_link, id_user, isProfil) VALUES (?, ?, ?)'; db.connection.query(sql, data, function (err, result) { if (err) deferred.reject(err.name + ': ' + err.message); var sql = 'SELECT id_user, photo_link, isProfil FROM `photos` WHERE id = ?'; if (result){ db.connection.query(sql, [result.insertId], function(err, photo) { if (err) deferred.reject(err.name + ': ' + err.message); if (photo) { new_photos.push(photo[0]); } if(++done >= todo){ deferred.resolve(Array.prototype.slice.call(new_photos)); return deferred.promise } }); } else { if(++done >= todo){ deferred.resolve(Array.prototype.slice.call(new_photos)); return deferred.promise; } } }) }) } 观察点。在checked data-bind。
  • 中使用此observable
  • 在父视图模型中使用checkedcomputed方法创建read
    • write功能会检查所有项是否已选中
    • read函数将写入的值传递给每个项目

以下是代码的样子:

&#13;
&#13;
write
&#13;
function ViewModel() {
  
  this.items = [
    { id: 1, checked: ko.observable(false) },
    { id: 2, checked: ko.observable(false) },
    { id: 3, checked: ko.observable(false) },
    { id: 4, checked: ko.observable(false) },
  ];
  
   this.allChecked = ko.computed({
     read: function() {
       return this.items.every(function(item) {
         return item.checked();
       });
     },
     write: function(value) {
        this.items.forEach(function(item) {
          item.checked(value);
        });
     }
   }, this);
}
    
ko.applyBindings(new ViewModel());
&#13;
&#13;
&#13;