ノックアウトのインライン編集バインディングを探しに行きましたが、見つけたのはjQuery以外の外部依存関係があるか、単なるバインディング以上のものを使用していました。
それで、私が思いついた単純なものを共有することにしました(他の答えはもちろん歓迎します、特にノックアウトのみを使用するもの)。
ノックアウトのインライン編集バインディングを探しに行きましたが、見つけたのはjQuery以外の外部依存関係があるか、単なるバインディング以上のものを使用していました。
それで、私が思いついた単純なものを共有することにしました(他の答えはもちろん歓迎します、特にノックアウトのみを使用するもの)。
別の方法として、インライン編集に使用したコードは次のようになります。
ko.bindingHandlers.hidden = {
update: function(element, valueAccessor) {
ko.bindingHandlers.visible.update(element, function() { return !ko.utils.unwrapObservable(valueAccessor()); });
}
};
ko.bindingHandlers.clickToEdit = {
init: function(element, valueAccessor) {
var observable = valueAccessor(),
link = document.createElement("a"),
input = document.createElement("input");
element.appendChild(link);
element.appendChild(input);
observable.editing = ko.observable(false);
ko.applyBindingsToNode(link, {
text: observable,
hidden: observable.editing,
click: observable.editing.bind(null, true)
});
ko.applyBindingsToNode(input, {
value: observable,
visible: observable.editing,
hasfocus: observable.editing
});
}
};
これが私のインライン編集バインディング(フィドル)ですが、DOM操作はjQueryに依存しています。
HTML:
<p>
Set an alarm for <span data-bind="inline: startTime"></span>
using <span data-bind="inline: snoozeCount"></span> Snooze(s).
</p>
JS:
ko.bindingHandlers.inline= {
init: function(element, valueAccessor) {
var span = $(element);
var input = $('<input />',{'type': 'text', 'style' : 'display:none'});
span.after(input);
ko.applyBindingsToNode(input.get(0), { value: valueAccessor()});
ko.applyBindingsToNode(span.get(0), { text: valueAccessor()});
span.click(function(){
input.width(span.width());
span.hide();
input.show();
input.focus();
});
input.blur(function() {
span.show();
input.hide();
});
input.keypress(function(e){
if(e.keyCode == 13){
span.show();
input.hide();
};
});
}
};
Dom Readyでは幅の信頼性が低いため、クリック機能で幅が設定されています。半分の時間で0として出力されていました。
また、クリックして切り替えるだけのトグル(ブール値)用に1つ作成しました。
ko.bindingHandlers.inlineToggle = {
init: function(element, valueAccessor, allBindingsAccessor) {
var displayType = allBindingsAccessor().type || "bool";
var displayArray = [];
if (displayType == "bool") {
displayArray = ["True", "False"];
} else if (displayType == "on") {
displayArray = ["On", "Off"];
} else {
displayArray = displayType.split("/");
}
var target = valueAccessor();
var observable = valueAccessor()
var interceptor = ko.computed(function() {
return observable() ? displayArray[0] : displayArray[1];
});
ko.applyBindingsToNode(element, { text: interceptor });
ko.applyBindingsToNode(element, { click: function(){ target (!target())} });
}
};
そのように適用します(2番目のパラメーターはオプションです):
<span data-bind="inlineToggle: alert, type: 'on'"></span>
フィドルにはforselect
とmulti-select
、も含まれていますが、現在、複数選択すると表示がジャンプします。それを修正する必要があります。
答えはすでに受け入れられていますが、より良い解決策を見つけたと思うので、共有したいと思います。
ここのドキュメントにあるものを使用することになりました
そして、このバインディングのラフ ドラフトを思いつきました。
ko.bindingHandlers['textinlineeditor'] = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var observable = valueAccessor();
var value = ko.utils.unwrapObservable(observable);
var saveHandler = allBindingsAccessor().editorsavehandler || function (newValue) { observable(newValue); return true; };
var inputType = allBindingsAccessor().editorinputtype || "text";
var vm = new inlineEditorViewModel({ val: value, saveHandler: saveHandler });
$(element).append("<span data-bind=\"text: editableValue, hidden: editing\"></span>");
$(element).append("<input type=\"" + inputType + "\" data-bind=\"value: editableValue, visible:editing\"/>");
$(element).append("<div class=\"pull-right\"></div>");
$(element).find("div.pull-right").append("<span class=\"glyphicon glyphicon-edit\" aria-hidden=\"true\" data-bind=\"click: edit, hidden: editing\"></span>");
$(element).find("div.pull-right").append("<span class=\"glyphicon glyphicon-check\" aria-hidden=\"true\" data-bind=\"click: save, visible:editing\"></span>");
$(element).find("div.pull-right").append("<span class=\"glyphicon glyphicon-remove-circle\" aria-hidden=\"true\" data-bind=\"click: cancelSave, visible:editing\"></span>");
var innerBindingContext = bindingContext.extend(vm);
ko.applyBindingsToDescendants(innerBindingContext, element);
return { controlsDescendantBindings: true };
}
};
コードで使用したモデルは
var inlineEditorViewModel = function (init) {
var self = this;
self.editableValue = ko.observable(init.val);
self.lastEditableValue = ko.observable(init.val);
self.editing = ko.observable(false);
self.edit = function () {
self.editing(true);
};
self.save = function () {
if (init.saveHandler(self.editableValue())) {
self.lastEditableValue(self.editableValue());
self.editing(false);
}
};
self.cancelSave = function () {
self.editableValue(self.lastEditableValue());
self.editing(false);
};
};
あなたのhtmlでは、次のように使用します
<div data-bind="textinlineeditor: name, editorsavehandler: saveName"></div>
注: 私は Bootstrap を使用しているため、バインディング html のアイコンはそこからのものです。