JavaScript – 主干：在视图中使用模型的数据和函数

我对Backbone很新,并且想知道如何从一个将模型注入到依赖关系的视图中访问模型的数据和函数.

我的模型看起来像这样：

countries.coffee

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

我的看法如下所示：

country.coffee

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

我正在将CountriesModel注册为依赖关系,但是当我调用该函数或记录这些国家时,我会收到以下错误：

Uncaught ReferenceError: returnCode is not defined

我无法解决我在做错什么.任何帮助是赞赏.提前致谢！

UPDATE

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

我正在尝试创建一个可重用的模型(CountriesModel),所以我可以在我的应用程序的不同视图上访问该国家数组和returnCode函数.但是,我无法在CountryView上找到如何访问它们.

我的CountryView已经需要一个ModelModel模型,我可以像这样调用ProjectModel中的函数和数组：

this.model.exampleArray
this.model.exampleFunction()

我无法解决我如何从CountriesModel调用函数或数组.

任何人知道我在做错什么？

解决方法

我认为在这种特殊情况下,您可以创建一个模型“countryModel”和骨干集合“countriesCollection”.但是这可能不是您的问题的性质(您的更新表明您正在努力与模型的可重用性),所以我不会在我的答案中考虑到这一点.
我不知道coffeescript,但我会详细说明使用Javascript.
答案确实在技术上是通过options参数将模型传递给实例化过程中的视图.

我认为使用Presenter对象来管理特定视图组是一个好主意.该对象将实例化与之相关的视图,正如您所提及的那样,允许将countryModel的实例注入此演示者.
想象一下,假设您有一个webapp,可以为需要您描述的模型的地方呈现地图和列表.你可以看到如下代码：

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

会发生什么是您只将模型实例化一次,并将实例注入需要它的演示者.
在演示者对象中,您可以立即访问在传递的模型上设置的属性/方法.

这种方法允许您快速识别哪些演示者需要可重复使用的模型.
如果您需要新的演示者中的组件,也很容易将其传入.
然后,在演示者中,您仍然可以选择特定要发送模型的视图.

例如.名单主持人：

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

从视图或演示者中,您可以在模型上收听事件,执行其方法并重新呈现视图.
个人我从演示者管理这个逻辑,因为这是我使用其他注入的服务和组件来执行的地方.服务器调用或对于不同视图可能是常见的特定计算.通过将事件聚合器传递给每个视图实例,可以轻松处理不同视图的此常用逻辑.视图触发自定义事件以执行所需的操作,并且演示者监听自定义事件,执行所需的逻辑并重新呈现视图.
我更喜欢保持视图清晰,专注于DOM交互/ DOM事件绑定.

Sidenote：Backbone Marionette提供了一个应用级别的事件聚合器,可以节省您将事件聚合器传递给每个视图的痛苦.
它也是一个非常方便的lib,通过使用如下语法从演示者呈现视图：

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

通过使用Marionette区域重新显示视图是内存安全的.

希望这是有帮助的.

JavaScript – 主干：在视图中使用模型的数据和函数

解决方法

猜你在找的JavaScript相关文章