Javascript 主干：使用型号'；视图中的数据和函数

我对主干相当陌生，想知道如何从将模型作为依赖项注入的视图中访问模型的数据和函数

我的模型如下所示：

国家。咖啡

define [
  'underscore'
  'backbone'
  'parse'
], (_, Backbone, Parse) ->
  'use strict';

  class CountriesModel extends Parse.Object

    countries: ['GB','US','FR','JP','WL','ZM','NG']

    returnCode = (code) ->
      return code

define [
  'jquery'
  'underscore'
  'backbone'
  'templates'
  'models/projects'
  'models/countries'
], ($, _, Backbone, JST, CountriesModel, ProjectModel) ->
  class CountryView extends Backbone.View

    ...

    console.log countries

    returnCode(4)

我的观点是这样的：

乡村咖啡

define [
  'underscore'
  'backbone'
  'parse'
], (_, Backbone, Parse) ->
  'use strict';

  class CountriesModel extends Parse.Object

    countries: ['GB','US','FR','JP','WL','ZM','NG']

    returnCode = (code) ->
      return code

define [
  'jquery'
  'underscore'
  'backbone'
  'templates'
  'models/projects'
  'models/countries'
], ($, _, Backbone, JST, CountriesModel, ProjectModel) ->
  class CountryView extends Backbone.View

    ...

    console.log countries

    returnCode(4)

我将

CountriesModel

作为依赖项注入，但是当我调用函数或记录

countries

时，我得到以下错误：

Uncaught ReferenceError: returnCode is not defined

我不知道我做错了什么。感谢您的帮助。提前谢谢

更新

我已经更新了上面的代码，以提供更多的上下文

我正在尝试创建一个可重用的模型（

CountriesModel

），这样我就可以在我的应用程序的不同视图上访问

countries

数组和

returnCode

函数。但是我不知道如何在我的

CountryView

上访问它们

我的

CountryView

已经需要一个模型

ProjectModel

，我可以从

ProjectModel

调用函数和数组，如下所示：

此.model.exampleArray
this.model.exampleFunction（）

我无法确定如何从我的

CountriesModel

调用函数或数组

---

有人知道我做错了什么吗？

TBH我真的不明白你为什么用你的模型当副总裁。一个好的视图应该从模型中抽象出来，并且模型应该附着到路线的视图中

// this goes in your view file
var CountryView = Backbone.view.extend({
    // here goes all the view logic to display the model data
    // you can refer to your model using this.model
})

...
// in the router file
var myModel = new CountriesModel();

var router = Backbone.router.extend({
    routes: {
        "": home,
        "home": home
    },
    home: function (){
       var view = new CountryView({ model: myModel});
       view.render(); //if you didn't rendered the view in the initialize method
    }
})

---

您可以在视图中访问另一个模型，并在运行时将其附加到路由器中

...
// in the router file
var myModel = new CountriesModel();
var anotherModel = new ProjectModel();


var router = Backbone.router.extend({
    routes: {
        "": home,
        "home": home
    },
    home: function (){
       var view = new CountryView({
                               model: myModel
                               anotherModel: anotherModel
                               });
       view.render(); //if you didn't rendered the view in the initialize method
    }
})

在CountryView中，将其附加到初始化函数中

initialize: function (options){
    this = _.extend(options, this)
    // or
    // this.anotherModel = options.anotherModel
    // this.model = options.model
}

但是你不应该在一个视图中混用模型，只需要为projectModel创建另一个视图，并在需要时同时使用它们

// something like
var countryView = new CountryView({model: myModel});
var projectView = new ProjectView({model: anotherModel});

---

并从路由器一起渲染它们

在您的视图中，您可以实例化除此.model中引用的模型以外的其他模型。例如：

...
// in the router file
var myModel = new CountriesModel();
var anotherModel = new ProjectModel();


var router = Backbone.router.extend({
    routes: {
        "": home,
        "home": home
    },
    home: function (){
       var view = new CountryView({
                               model: myModel
                               anotherModel: anotherModel
                               });
       view.render(); //if you didn't rendered the view in the initialize method
    }
})

var SomeView = Backbone.View.extend({

    initialize: function() {
        this.countriesModel = new CountriesModel();

        // Anywhere in your view do stuff with `this.countriesModel`. E.g:
        // this.listenTo(this.countriesModel, ...)
        // this.countriesModel.fetch()
        // etc
    }

});

---

我认为在这种特殊情况下，创建一个模型“countryModel”和一个主干集合“countriesCollection”会很有用。但这可能不是您问题的本质（您的更新表明您正在努力解决模型的可重用性问题），因此我在回答时不会考虑这一点。
我不知道coffeescript，但我将使用Javascript详细说明。
从技术上讲，答案确实是在实例化期间通过

选项

参数将模型传递给视图

我认为使用presenter对象来管理特定的视图组总体上是一个好主意。此对象将实例化相关的视图，如您所述，允许将countriesModel的实例注入此演示者。
假设您有一个Web应用程序，它可以渲染地图和列表，其中包含出于某种原因需要您描述的模型的位置。您可能有如下代码：

var countriesModel = new CountriesModel(); 

var headerPresenter = new HeaderPresenter(); 
var mapPresenter = new MapPresenter(countriesModel); 
var listPresenter = new ListPresenter(countriesModel); 

只需实例化一次模型，然后将实例注入需要它的演示者。
在presenter对象中，您可以立即访问传递的模型上设置的属性/方法

此方法允许您快速确定哪些演示者需要可重用模型。
如果您在新的演示者中也需要该组件，则很容易将其传入。
然后，在演示者中，您仍然可以选择要将模型发送到哪些视图

例如，列出演示者：

function listPresenter(countriesModel){ 
    this.listView = new ListView({ "model": countriesModel); 
    //More views can be added with the same model instance 
}; 

您可以从视图或演示者中收听模型上的事件，执行其方法并重新呈现视图。
就我个人而言，我从演示者那里管理这个逻辑，因为这是我使用其他注入的服务和组件来执行的地方，例如服务器调用或对于不同视图来说可能很常见的特定计算。通过向每个视图实例传递事件聚合器，可以轻松地为不同视图处理此公共逻辑。视图触发自定义事件以执行所需操作，演示者侦听自定义事件，执行所需逻辑并（重新）呈现视图。
我更喜欢保持视图的整洁，并关注DOM交互/DOM事件绑定

侧注：主干木偶网提供了一个应用程序级事件聚合器，可以省去将事件聚合器单独传递到每个视图的麻烦。
它也是一个非常方便的库，可以使用以下语法从演示者渲染视图：

var someView = new SomeView(); 
var region = new Marionette.Region({ el: "#some-region" }); 
region.show(someView); 

使用木偶区域重新显示视图是内存安全的

---

希望这能有所帮助

我使用我的模型作为依赖项，因为我需要将数据和逻辑从模型引入到我的视图中。我的印象是这样做的？？你肯定应该阅读这两个，以及这个列表中的一个教程。我选择的教程是，在youtube上的某个地方有一段视频。不确定你所说的“注入”是什么意思，你的意思是你需要在模型中使用它并在视图中实例化它吗？这是一个很好的实践，你可以在上面访问任何你想要的东西。你没有展示代码的重要部分，所以我看不到你做了什么wrong@DominicTobias对不起，我的意思是像你说的那样要求和实例化。我已经更新了代码以提供更多的上下文。我认为您需要更改示例中依赖项的顺序，应该是：

（$，\u，主干，JST，ProjectModel，CountriesModel）

。您的模型/项目是什么样子的？正如@SergeyDenisov所指出的，您的require语句是相反的。但这里更重要的是如何实例化对象，在require语句中添加依赖项并不意味着它将被使用。显示构造函数代码和objet实例化代码，以及在Recommend中传递的参数，并查看木偶。扩展主干网，使重用模型变得轻而易举。不太清楚为什么要注入而不是将模型包含在视图构造函数中；使用控件