2015-03-27 3 views
2

У меня есть текстовое поле, связанное с пользовательской привязкой. Ради всего всего он завершает управление граничным div. Затем я передаю привязанную привязку к привязке значения, но она не обновляет лежащую в основе наблюдаемую, как я ожидал.Пользовательская привязка нокаута, не обновляющая базовые наблюдаемые

= Html =

<body data-bind="with: model"> 
    <textarea data-bind="wrapbox: someval" ></textarea> 
    <textarea data-bind="value: someval" ></textarea> 
    <div data-bind="text: someval"></div> 
    </body> 

= Js =

ko.bindingHandlers.wrapbox = { 
    update: function(element, valueAccessor) 
    { 
    var value = ko.unwrap(valueAccessor()); 
    $(element).wrap("<div class='border' />"); 
    return ko.bindingHandlers.value.update(element, 
     function(){return value; }); 
    //return ko.bindingHandlers.value.update(element, 
    // valueAccessor()); <---- tried this too. 
    } 
}; 


var viewmodel = function() { 
    var model = {}; 
    model.someval = ko.observable(); 

    return { 
    model: ko.observable(model) 
    }; 
}(); 

ko.applyBindings(viewmodel); 

= Пример =

http://liveweave.com/QmJeaH

ответ

1

Ваш связывающий обработчик должен

  • настроить свое состояние в init
  • проходят все через к value связывания непосредственно в обоих init и update

Код:

ko.bindingHandlers.wrapbox = { 
    init: function (element, valueAccessor, allBindingsAccessor, 
        viewModel, bindingContext) { 
     $(element).wrap("<div class='border' />"); 
     ko.bindingHandlers.value.init(element, valueAccessor, 
      allBindingsAccessor, viewModel, bindingContext); 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, 
        viewModel, bindingContext) { 
     ko.bindingHandlers.value.update(element, valueAccessor, 
      allBindingsAccessor, viewModel, bindingContext); 
    } 
}; 

Обновлено ваш пример: http://liveweave.com/Yq1UPl

1

Убедитесь, что вы создали свою привязку в init обработчик, который в отличие от update работает только один раз и должен содержать ваш $.wrap.

Вдоль этих линий, если вы заключаете другой привязки, убедитесь, что вызывается как его init и update, где это уместно, и пройти по всем аргументам может потребоваться:

ko.bindingHandlers.wrapbox = { 
 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
 
    $(element).wrap("<div class='border' />"); 
 
    
 
    return ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext); 
 
    }, 
 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
 
    return ko.bindingHandlers.value.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext); 
 
    } 
 
}; 
 

 
var viewmodel = function() { 
 
    var model = {}; 
 
    model.someval = ko.observable(''); 
 
    
 
    return { 
 
    model: ko.observable(model) 
 
    }; 
 
}(); 
 

 
ko.applyBindings(viewmodel);
.lw { font-size: 60px; } 
 

 
.border{ 
 
    border: 3px solid red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div data-bind="with: model"> 
 
    <textarea data-bind="wrapbox: someval" ></textarea> 
 
    <textarea data-bind="value: someval" ></textarea> 
 
    <div data-bind="text: someval"></div> 
 
</div>

Смежные вопросы