私はこのためにカスタムバインディングハンドラを使用することをお勧めします。 間違いなく機能性を達成するための方法ですが、私はそれがどこへ行くか、クリーン/効率的な方法だかはわからない例http://jsfiddle.net/7v6Dx/10/
Htmlの
<div>
<span class="editField">
<span data-bind="text: Address1">Click here to edit</span>
<input type="text" data-bind="clickEditor: Address1">
</span>
</div>
はJavaScript
ko.bindingHandlers.clickEditor = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var $element = $(element).hide();
var $text = $element.prev();
var $buttons = $("<span class='editConfirm'> \
<button class='saveEdit' type='button'>Save</button> \
<button class='cancelEdit' type='button'>Cancel</button> \
</span>").hide().insertAfter($element);
var $editElements = $buttons.add($element);
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$buttons.remove();
});
var _toggle = function(edit) {
$text[edit? 'hide' : 'show']();
$editElements[edit? 'show' : 'hide']();
}
$text.click(function(e) {
_toggle(true);
});
$editElements.find('.saveEdit').click(function() {
_toggle(false);
valueAccessor()($element.val());
});
$editElements.find('.cancelEdit').click(function() {
_toggle(false);
$(element).val(ko.utils.unwrapObservable(valueAccessor()));
});
}
, update: function (element, valueAccessor) {
$(element).val(ko.utils.unwrapObservable(valueAccessor()));
}
};
$(document).ready(function() {
var helpText = "Click here to edit";
function appViewModel() {
this.Address1 = ko.observable(helpText);
}
ko.applyBindings(appViewModel());
});
これはまさに私が探していたものです。 knockoutjsとjQueryの素晴らしい組み合わせで、完全な実例を作成していただきありがとうございます。そこにはたくさんの新しいものがあり、knockoutjsのことでやっていたことを理解するために私は少し研究を要した。 – Jerry
私のサンプルで欠けているのはaddDisposeCallback(これはいくつかのシナリオでは重要かもしれません)を呼び出すことだけです。編集された例。 – Artem
@Artemこの質問を見ることができますpls:[リンク](http://stackoverflow.com/questions/35869093/display-data-from-couchdb-with-knockoutjs/35887453#35887453) – FBC