Knockout自定义绑定和运行ViewModel函数

时间:2013-10-20 20:19:54

标签: binding knockout.js contenteditable

我发现了一个自定义绑定,它在可编辑的div中进行了可观察的更新。 当事件发生时,我无法运行函数。

有谁知道我可以对我的自定义绑定“editableText”做什么在我的ViewModel中运行一个函数?

我希望在更改文本时运行“nameChange”函数。

HTML:

<div contenteditable="true" data-bind="event: { change: nameChange }, editableText: firstName"></div>

使用Javascript:

//Editable Text Custom Binding
ko.bindingHandlers.editableText = {
    init: function (element, valueAccessor) {
        $(element).on('blur', function () {
            var observable = valueAccessor();
            observable($(this).text());
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor, data) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).text(value);
    }
};

//Knockout ViewModel
function viewModel(){
    var self = this;
    self.firstName = ko.observable();
    self.status = ko.observable();

    self.nameChange = function(){
        console.log("Name has been updated");
        ko.mapping.fromJS("Name has been updated", {}, self.status)
    }

    self.loadName = function(){
        ko.mapping.fromJS("hey", {}, self.firstName)
    }
}

var vm = new viewModel();
ko.applyBindings(vm);
vm.loadName();

的jsfiddle: http://jsfiddle.net/madscientist1882/urLd2/

1 个答案:

答案 0 :(得分:0)

订阅observable的更改怎么样? (看看明确订阅了observables)

self.firstNameSubscription = self.firstName.subscribe(function (newValue){
  //do something
});

如果您这样做,则需要在视图模型出现故障时处理订阅

self.firstNameSubscription.dispose();

如果您希望每次输入密钥时都更新observable,请look here

我个人的观点是,使用变量名'self'是probably a bad idea...