1

これは、DB から何も取得されていないときにモデルにプッシュするブートストラップ データとして持っています。

var liveaudience = {

triggers : [
    {
        'trigger_id': 'vocal_stomp',
        'duration': 1000,
        'color': '#F23000',
        'sound': 'A#'
    },
    {
        'trigger_id': 'guitar_stomp',
        'duration': 600,
        'color': '#CC0234',
        'sound': 'Cmaj'
    },
    {
        'trigger_id': 'drum_pad',
        'duration': 1200,
        'color': '#CF2451',
        'sound': 'Emin'
    }
]

};

これを実行してから、これら 3 つのブートストラップされた要素をテンプレートにレンダリングする、次の 1 つのルートがあります。

get('/:triggerId?', function(page, model, params){

    var triggers = model.get('liveaudience.triggers');
    if(typeof triggers === 'undefined'){
         // bootstrap triggers
         model.push('liveaudience.triggers', liveaudience.triggers);
    }

    model.subscribe("liveaudience.triggers", function(err, scopedModels){
        page.render({'triggers': scopedModels.get()[0]});
    });
});

そして、ここにテンプレートがあります：

<ul id="triggers">
        {{#each triggers}}
            <li data-id="{{id}}" class="trigger" style="background-color:{{color}};">
                <span class="trigger-label">{{trigger_id}}</span>
                <a x-bind="click:removeTrigger" class="remove-trigger">x</a>
            </li>
        {{/}}
    </ul>

すべてが表示されますが、 {{id}} は関数を返します。一意に割り当てられたGUIDにしたいと思います。removeTrigger主な問題は、ハンドラーをクリックして起動するときに、DOM からこの要素を取得および削除する方法がわからないことです。例を見ると、ハンドラー内で次のことがわかりました。

model.at(e.target).remove();

しかし、それはうまくいきません。

何か案は？！

4

1 に答える 1

1

トリガーを page.render に渡す代わりに、そのように model.ref を使用してみてください

ダービー0.5用

var triggers = model.at('liveaudience.triggers');
model.subscribe(triggers, function(err){
  model.ref('_page.triggers', triggers);
  page.render();
});

ダービー0.3用

model.subscribe('liveaudience.triggers', function(err,scopedModels){
  model.ref('_page.triggers', scopedModels);
  page.render();
});

次に、ループ内のトリガーに次のようにアクセスします

{{#each _page.triggers}}

これにより、バインディングが正しくセットアップされます。

そして削除します（Derby 0.5の場合、0.3の場合は絶対にわかりません）

e.at().remove();
于 2013-06-21T17:49:04.290 に答える