1

私は Knockout にまったく慣れていないので、結果の DOM に表示される方法に少し驚いています。

data4 つの属性を 1 行と 1 つのクラスに追加していますが、生成された HTML マークアップを調べてデバッグすると、物事が冗長になり始めていることがわかりました。

このようなことを達成したい場合:

<tr class="admin" data-user-id="10" data-user-email:'demo@demo.com' data-active="true">Alvaro</tr>

結果として得られる HTML マークアップでは、時間が長すぎます。

<tr data-bind="text: name, css: type, attr:{ 'data-user-id': user_id, 'data-user-email': email, 'data-active': $root.isActive()}" class="admin" data-user-id="10" data-user-email='demo@demo.com' data-active="true">Alvaro</tr>

結果のマークアップに多くの隠しデータ (またはロジック) が表示されるため、DOM の検査が少し難しくなります。

これは、これらの種類のフレームワークでは正常ですか? (ember.js、angular.js...) それとも、knockout.js 特有のものですか?

この種の「重複」を防ぐ方法はありますか?

4

2 に答える 2

3

次のようなカスタムバインディングを作成した場合、Jeff Mercado のコメントに基づいて構築します。

ko.bindingHandlers.myCustomBinding = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var $data = ko.unwrap(valueAccessor());
        element.setAttribute('data-user-id', $data.user_id);
        element.setAttribute('data-user-email', $data.email);
        element.setAttribute('data-active', ko.unwrap(bindingContext.$parent.isActive));
    }
}

次のように要素に適用できます。

<tr data-bind="myCustomBinding: $data"></tr>

DOM を調べた結果の HTML は次のようになります。

<tr data-bind="myCustomBinding: $data" data-user-id="10" data-user-email="demo@demo.com" data-active="true"></tr>

おしゃべりが減り、再利用可能なバインディングができました。

$dataまた、上記の例で行ったように、カスタム バインディングに渡す必要はありません。代わりbindingContext.$dataにinit、valueAccessor. これを行うと、空の文字列を含むカスタム バインディングに何でも渡すことができますvalueAccessor。これは、カスタム バインディングでは使用されないためです。これにより、代わりに次のように見えるため、HTML がさらに短くなります。<tr data-bind="myCustomBinding: ''"></tr>

于 2015-07-01T18:14:08.820 に答える
2

バインディング後に HTML に属性が保持されることが懸念される場合はdata-bind、カスタム バインディング プロバイダーを使用してその属性を削除できます。そのために私が書いたものを次に示します: https://stackoverflow.com/a/23620576/1287183

于 2015-07-01T22:52:40.077 に答える