如何使用Jquery可编辑插件和淘汰js一起使用进行编辑时获得实时更新

often i use jquery in web application. but nowadays knockout js and angular js is using many people for declarative data binding. i roughly read knockout js documentation from there web site.

我常常在Web应用程序中使用jquery。但现在淘汰js和角js正在使用许多人进行声明性数据绑定。我粗略地从那里的网站上阅读淘汰js文档。

i got a code which display data in tabular fashion for shopping cart system and i checked it is working but i saw one lack in code that when i change price or quantity then instantly amount is not changing but all properties are observable. later i could guess why amount is not changing instantly when price or Qty is changing because jquery editable plugin dynamically place a textbox which is not bound to any observable property.

我得到了一个代码,以表格方式显示购物车系统的数据,我检查它是否正常工作,但我看到一个代码缺乏,当我改变价格或数量,然后立即金额不变,但所有属性都是可观察的。后来我猜到为什么当价格或数量正在改变时金额不会立即改变,因为jquery可编辑插件动态地放置一个未绑定到任何可观察属性的文本框。

so anyone could tell me how to dynamically add or place knockout js bind attribute to dynamically generate textbox for in-place edit ?

所以任何人都可以告诉我如何动态添加或放置knockout js绑定属性动态生成文本框进行就地编辑?

here is jsfiddle http://jsfiddle.net/tridip/nzogas5z/

这里是jsfiddle http://jsfiddle.net/tridip/nzogas5z/

and full code

<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"></td>
        <td class="editable number" data-bind="dataCell: price, valueUpdate: 'keypress'" ></td>
        <td class="editable number"data-bind="dataCell: quantity"></td>
        <td class="number" data-bind="text: amount"></td>
    </tr>
</script>

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

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

            if (value != existing) {
                $(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);
    //alert(viewModel.orders.length());

    $('.editable').editable({ onEdit: edit, onSubmit: submit, onCancel: cancel });

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

function edit(content) {
    $(this).addClass("editing");
    $(this).children('input').get(0).select();
}

function submit(content) {
    $(this).removeClass("editing");
    $(this).change();
}

function cancel(content) {
    $(this).removeClass("editing");
}

i want when i change price or Qty then amount fields should recalculate instantly. guide me what to achieve. thanks

我希望当我改变价格或数量时,金额字段应立即重新计算。指导我实现目标。谢谢

1 个解决方案

#1

To get live updates, you need the textInput binding from Knockout 3.3 (or you'd have to roll your own). I've made a modified Fiddle that uses Knockout to simulate the jquery-editable behavior via a custom binding handler that uses a span (with text binding behavior) and an input (with textInput binding behavior).

要获得实时更新,您需要来自Knockout 3.3的textInput绑定(或者您必须自己动手)。我做了一个修改过的Fiddle,它使用Knockout通过自定义绑定处理程序来模拟jquery可编辑的行为,该处理程序使用span(带有文本绑定行为)和输入(带有textInput绑定行为)。

I got rid of the templating and built the table body with an ordinary foreach binding. I chose to do the showing and hiding with CSS and an editing class, but you could do explicit calls to show and hide if you prefer.

我摆脱了模板,用普通的foreach绑定建造了桌身。我选择使用CSS和编辑类进行显示和隐藏,但是如果您愿意,可以显式调用显示和隐藏。

<tbody data-bind='foreach: orders'>
    <tr>
        <td data-bind="text: product"></td>
        <td class="number editable" data-bind="dataCell:price"></td>
        <td class="number editable" data-bind="dataCell:quantity"></td>
        <td class="number" data-bind="text: amount"></td>
    </tr>
</tbody>

All the jQuery stuff is handled by a custom bindingHandler.

所有jQuery内容都由自定义bindingHandler处理。

ko.bindingHandlers.dataCell = {
    init: function (element, valueAccessor, allBindings, data, context) {
        var span = $('<span>').appendTo($(element))[0];
        ko.bindingHandlers.text.init(span, valueAccessor, allBindings, data, context);
        var input = $('<input>').appendTo($(element))[0];
        ko.bindingHandlers.textInput.init(input, valueAccessor, allBindings, data, context);
        $(element).click(function () {
            $(element).addClass('editing');
            $(input).focus().select();
        });
        $(input).blur(function () {
            $(element).removeClass('editing');
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var span = $(element).children('span')[0];
        ko.bindingHandlers.text.update(span, valueAccessor, allBindingsAccessor, viewModel);
    }
};

The binding handler does these things:

绑定处理程序执行以下操作:

1. Creates a span and an input inside the element with the binding (the td, in our example)

使用绑定在元素内创建跨度和输入(在我们的示例中为td)

2. Calls the init function for the standard text binding on the span

在span上调用标准文本绑定的init函数

3. Calls the init function for the standard textInput binding on the input

在输入上调用标准textInput绑定的init函数

4. Attaches click trigger to the bound element (the td) to go into editing mode (show input, hide span)

将单击触发器附加到绑定元素(td)以进入编辑模式(显示输入,隐藏跨度)

5. Attaches blur trigger to the input element to end editing mode (show span, hide input)

将模糊触发器附加到输入元素以结束编辑模式(显示范围,隐藏输入)

6. In the update section, calls the standard update binding on the input

在更新部分中,调用输入上的标准更新绑定