Javascript 主干：试图找出基本的控制流程，有人能告诉我这是否合理吗？

我正在构建一个带有搜索表单和一些结果的简单主干应用程序。我想：

• 允许用户更改“订购人”选择字段的值，并适当更新URL和结果
• 确保当用户通过预设URL到达时，显示正确的结果，并且所选表单元素与URL和结果匹配

我想我已经找到了正确的控制流来使用，但我真的希望有人检查它是否正常。基本上，我让我的视图直接更新URL，然后路由器完成更新模型的工作。其他视图则听模型

它似乎工作正常，但我必须在视图中手动构建URL，然后在路由器中再次解析它，这让人感觉重复。所以，如果知道这是在主干网中做事情的正确方法，或者我能做得更好，那就太好了

以下是伪代码：

 User changes value of select to "price-asc"    
           |                                        
           |                                        
           v                                        
 Form view hears change event, and              
 updates the URL to #order-by-price-asc            
           |                                       
           |                                       
           v                                       
 Router looks at new route,        <----- User loads page, with 
  sets model value                       #order-by-price-asc route
           |
           |
           v   
  Results view hears change 
  to model value, loads in 
  new results via Ajax

---

您可以做的优化很少：

使用可选路由参数，而不是手动解析url：

var AppRouter = Backbone.Router.extend({
    routes: {
      "*str(/by-:sort)": "index",
    },
    index: function(str, sort) {
      if(sort) {
        //...
      }
    }
});

考虑允许视图处理模型更改，而不是通过路由器。为了避免代码重复，将此逻辑封装在模型方法中

var SearchModel = Backbone.Model.extend({
  sort: function(field) {
    this.set({query:field});
  }
});

var SearchFormView = Backbone.View.extend({
  el:"#order",
  events: {
    "change": "updateSort"
  },
  updateSort: function(e) {
    var sortOrder = this.$el.val();

    //update model
    this.model.sort(sortOrder);

    //navigate without trigger:true, will update the URL but not trigger route
    SearchApp.navigate(sortOrder ? "/by-" + sortOrder : "");
  }
}    

var AppRouter = Backbone.Router.extend({
    index: function(str, sort) {
      if(sort) {
        this.searchModel.sort(sort);
      }
    }
}); 

---

还要注意，我将

视图.el

声明更改为

#order

，并使用

this.$el

引用元素，而不是jQuery选择器。这些都是不相关的，但仍然是最佳实践。

但是你会保持

updateFormClasses

和

SearchResultsView

的逻辑基本相同吗？老实说，我没有太多时间去看它们。我对

SearchResultsView

很满意，但是我不知道我在

updateFormClasses

上做的事情是否正确。如果你没有时间看，没问题，但我希望你能放心！我不明白它为什么会工作-感觉它应该触发

change

事件。

var AppRouter = Backbone.Router.extend({
    routes: {
      "*str(/by-:sort)": "index",
    },
    index: function(str, sort) {
      if(sort) {
        //...
      }
    }
});

var SearchModel = Backbone.Model.extend({
  sort: function(field) {
    this.set({query:field});
  }
});

var SearchFormView = Backbone.View.extend({
  el:"#order",
  events: {
    "change": "updateSort"
  },
  updateSort: function(e) {
    var sortOrder = this.$el.val();

    //update model
    this.model.sort(sortOrder);

    //navigate without trigger:true, will update the URL but not trigger route
    SearchApp.navigate(sortOrder ? "/by-" + sortOrder : "");
  }
}    

var AppRouter = Backbone.Router.extend({
    index: function(str, sort) {
      if(sort) {
        this.searchModel.sort(sort);
      }
    }
});