0

KnockoutJS を使用していくつかの UI 自動化に取り組んでいます。私の質問はかなり単純です。KnockoutJS を使用しているときに、次のようなものを作成したいと思います。

<div data-bind="textboxFor: FirstName"></div>

カスタムバインディング付き。最終結果は次のようになります。

<!-- Name -->
<div class="control-group">
    <label class="control-label" for="txtFirstName">FirstName:</label>
    <div class="controls">
        <input id="txtFirstName" type="text" data-bind="value: FirstName" />
    </div>
</div>

私が試してみました：

ko.bindingHandlers.textboxFor = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var propertyName, display;
        var valueList = element.attributes['data-bind'].nodeValue.split(',');
        valueList.forEach(function (node) {
            if (node.indexOf('textboxFor') !== -1) {
                propertyName = node.split(':')[1].trim();
            }
        });

        if (!viewModel.translations) {
            display = propertyName.charAt(0).toUpperCase() + propertyName.slice(1);
        }
        else {
            display = viewModel.translations[propertyName];
        }

        var _innerHTML = "<label class='control-label' for='txt" + propertyName + "'>" + display + ":</label>" +
                         "<div class='controls'>" +
                            "<input id='txt" + propertyName + "' type='text' data-bind='value: " + propertyName + "' />" +
                         "</div>";
        element.className = "control-group";
        element.innerHTML = _innerHTML;
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever the associated observable changes value.
        // Update the DOM element based on the supplied values here.
    }
};

しかし、これは

コウィズ：人
バインディング。第二に、バインドされたプロパティの名前を取得する方法は、非常に不自然に感じられます。誰かが私をより良い解決策に導くことができるかもしれません。

どうぞよろしくお願いいたします。カルロス

4

1 に答える 1

-1

この種のものはすでに Knockout に組み込まれています。テンプレート バインディングをご覧ください: http://knockoutjs.com/documentation/template-binding.html。あなたが達成しようとしていることを正確に行うと確信しています。

于 2013-07-26T15:17:22.653 に答える