1

我有一个Foo带有输入字段的视图和一个Bar带有按钮的包装视图。

当我在输入中写一些东西然后按下按钮时，应该触发 Foo 模型上的“更改”事件，然后触发 Bar 上的“单击”按钮，但只有第一个发生。有没有办法触发两者，最好是按正确的顺序？

谢谢！

4

2 回答 2

1

嗯，我有点糊涂了。如果您不使用任何主干插件，则工作流程会有所不同。

如果你在屏幕上按下某个东西，事件就会发生在视图中，而不是模型中。您必须监听该事件并相应地更新模型。如果在模型中设置新值，change模型事件将会发生。

说，你有一个视图Foo，它是 subviewBar和 model Boo。两个视图都使用相同的模型对象。

鉴于Bar，

events: {
   'click .button': 'onButtonClicked';
}

onButtonClicked: function () {
   var value = this.$el('.input').val();
   this.model.set({ someValue: value});
}

在Foo视图中，可以监听模型变化

initialize: function () {
  this.model.on('change:someValue', this.onSomeValueChanged);
}

在this.onSomeValueChanged你可以做，你喜欢什么。

于 2012-08-30T17:19:47.207 回答
1

重申并确认您的问题/设置。根据您的问题，这是您的设置。你想改变Foo.modelTHEN 触发clickBar 上的事件。

<div id="Bar">
    <div id="Foo">
        <input type="text">
    </div>
    <button id="barButton">Update</button>
</div>

这是一个有点奇怪的设置。@alexanderb 以我对整个问题的看法的方式说明了这一点，但我会解释在你的场景中我会做什么，假设你知道一些我不知道的情况！:-)

如果您希望在changeFoo.model 上触发，然后在 Bar 按钮上触发 click 事件，您只需从 Foo 视图手动触发按钮点击即可。为此，您可以使用以下几种方法之一。第一种是直接触发你的父（Bar）视图的事件。

// When you create your Foo subview, you pass in the parent view so you can access it
var foo = new Foo({
    'parent': this // this = the barView assuming you're creating FooView inside BarView
});

// In Foo after you set your model attribute, you access the parentView
this.options.parent.$el.find('#barButton').click();  // Manually trigger the click event

    // or

this.options.parent.onButtonClick() // Manually run the event handler bypassing the event

这满足了您在您提供的 DOM 上下文中让更改事件后跟按钮单击事件的请求。（不知道为什么在这种情况下，但我可以想象一些可能需要类似的情况。）

第二种方法是使用事件聚合器模式，它允许您的视图相互发送和接收事件。在这种情况下，发生的是您的 Foo 视图，在更新模型后触发了一个由您的父 Bar 视图侦听的事件，在该事件上它执行一些处理程序。

您可以在此处阅读有关 Backbone 中的事件聚合器模式的更多信息： 事件聚合器说明

老实说，我真的认为亚历山大的答案是这种情况下最好的答案，除非我们对您的特殊设置有更多不了解的地方。但是，我希望您可以查看和比较这两者，并了解在特定环境下何时以及为什么一种设置可能是合适的。

于 2012-08-30T18:07:03.913 回答