如何使用元素来获取数据绑定键和值observable?

时间:2014-08-04 09:55:18

标签: javascript jquery mvvm knockout.js viewmodel

我需要使用element获取数据绑定键和值observable。

<select id="selector" data-bind="options:selectOptions,value:selectedValue"></select>

var ViewModel = {
   selectOptions:ko.observableArray([...]),
   selectedValue:ko.observable()
   ...
   some other stuff
   ...
}

在其他视图模型中,我现在可以访问dom元素,我需要更新元素的绑定上下文observable。

如何获取数据绑定键和值?

我需要这样的东西

{
   options:selectOptions,
   value:selectedValue
}

2 个答案:

答案 0 :(得分:0)

ko.dataFor(元素)会有所帮助。见 -

http://knockoutjs.com/documentation/unobtrusive-event-handling.html

在您拥有该元素的其他视图模型中,请调用:

var bound_vm = ko.dataFor(element)

bound_vm将是绑定该元素的任何视图模型。

我认为你无法获得原始装订的关键/值; KO已将其解析为函数。大概在你的其他视图模型中你想要改变任何与选项绑定的东西,但你不知道它叫什么?您可以使用jQuery执行类似的操作来解析原始数据绑定属性:

OtherViewModel: {
    the_logic: function() {
        // We have the element already
        var element = [already set to a DOM node]

        // Get the view-model bound to the element
        var bound_vm = ko.dataFor(element)

        // Parse the original binding attribute on the element
        $($(element).attr("data-bind").split(",")).each(
            function(idx, binding) {
                var parts = binding.split(":")
                binding_info[parts[0].trim()] = parts[1].trim()
            }
        )

        // Now binding_info should hold what you want. EG we can set whatever
        // the options binding is bound to like this:
        bound_vm[binding_info[options]]([1,2,3)

    }
}

答案 1 :(得分:0)

我建议你使用它。您可以使用jquery unobtrusive plugin在javascript端处理它。

http://joel.net/unobtrusive-data-binding-for-knockout-js

为此你可以创建一个对象

var binding = {
    options: 'tickets',
    optionsCaption: "'Choose...'",
    optionsText: "'name'",
    value: 'chosenTicket'
}

并像这样使用

$('#tickets').dataBind(binding);

而不是这个

<select 
    data-bind="
        options: tickets, 
        optionsCaption: 'Choose...',
        optionsText: 'name',
        value: chosenTicket
    "
></select>

通过这种方式,您可以重用binding对象,并且您的代码将非常干净。请务必在applyBinding之前调用它。