敲除自定义绑定无法正确显示初始viewModel数据 [英] Knockout custom binding does not show initial viewModel data properly

问题描述

我使用第三方插件使表格可编辑.因此，我需要为< td>创建自定义绑定因此，由插件引起的对文本的任何更改都将触发视图模型更新.但是，与内置的文本"绑定相反，自定义绑定无法显示正确的数据.我做错了什么吗?

I use a third-party plugin to make a table editable. So I need to create a custom binding for <td> so that any changes to the text caused by the plugin would trigger a view model update. But the custom binding does not show correct data, as opposed to the built-in 'text' binding. Did I do anything wrong?

请参阅: http://jsfiddle.net/VbeBA/5

HTML:

<table id="table1" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <th style="width:150px">Product</th>
        <th>Price ($)</th>
        <th>Quantity</th>
        <th>Amount ($)</th>
    </tr>

    <tbody data-bind='template: {name: "orderTemplate", foreach: orders}'></tbody>
</table>

<script type="text/html" id="orderTemplate">
    <tr>
        <td data-bind="text: product">${product}</td>
        <td class="editable number" data-bind="dataCell: price"></td>
        <td class="editable number"data-bind="dataCell: quantity">${quantity}</td>
        <td class="number" data-bind="text: amount">${amount}</td>
    </tr>
</script>

CSS:

table 
{
    border: solid 1px #e8eef4;
    border-collapse: collapse;
}

table th
{
    padding: 6px 5px;
    background-color: #e8eef4; 
    border: solid 1px #e8eef4;   
}

table td 
{
    padding:0 3px 0 3px;
    margin: 0px;
    height: 20px;
    border: solid 1px #e8eef4;
}

td.number
{
    width: 100px;
    text-align:right;
}

td.editable
{
    background-color:#fff;
}

td.editable input
{
    font-family: Verdana, Helvetica, Sans-Serif;
    text-align: right;
    width: 100%;
    height: 100%;
    border: 0;
}

td.editing
{
    border: 2px solid Blue;
}

脚本:

$(function () {
    ko.bindingHandlers.dataCell = {

        init: function (element, valueAccessor) {
            ko.utils.registerEventHandler(element, "change", function () {
                var value = valueAccessor();
                value($(element).text());
            });
        },
        update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            var value = valueAccessor();
            $(element).text(value);
        }

    };

    var order = function (product, price, quantity) {
        this.product = product;
        this.price = ko.observable(price);
        this.quantity = ko.observable(quantity);
        this.amount = ko.dependentObservable(function () {
            return this.price() * this.quantity();
        }, this);
    }

    var ordersModel = function () {
        this.orders = ko.observableArray([]);
    }


    var viewModel = new ordersModel();
    viewModel.orders = ko.observableArray([
            new order("Gala Apple", 0.79, 150),
            new order("Naval Orange", 0.29, 500)
        ]);

    ko.applyBindings(viewModel);

    $(".editable").change();
});

推荐答案

在您的update函数中，您将需要打开可观察对象的包装. valueAccessor()将为您提供可观察的自身，然后您需要对其进行包装(将其作为函数调用)以获取值.

In your update function you will want to unwrap the observable. valueAccessor() is going to give you the observable itself and then you would want to unwrap it (call it as a function) to get the value.

一种安全的方法是使用ko.utils.unwrapObservable，因为它可以容忍可观察的和不可观察的.

A safe way to do that is to use ko.utils.unwrapObservable as it will tolerate both observables and non-observables.

因此，您的更新将如下所示:

So, your update would look like:

    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).text(value);
    }

另外，在您的小提琴中，您在淘汰赛之后列出了jQuery.tmpl，因此KO没有注册jQuery模板引擎.

Additionally, in your fiddle you had jQuery.tmpl listed after Knockout, so KO did not register the jQuery template engine.

这是更新的小提琴: http://jsfiddle.net/rniemeyer/VbeBA/8/

已更新: 最终解决方案位于 http://jsfiddle.net/rniemeyer/qQaUa/

Updated: The final solution is at http://jsfiddle.net/rniemeyer/qQaUa/

这篇关于敲除自定义绑定无法正确显示初始viewModel数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！