标签: backbone-views

我正在声明一个这样的视图:

var VirtualFileSelectorView = Backbone.View.extend({
    selected: function() {
        console.log("selected function");
    },

    initialize: function() {
        // Shorthand for the application namespace
        var app = brickpile.app;
        // bind to the selected event
        app.bind('selected', this.selected, this);
    }
});

然后我实例化了这个View的两个实例,你可以在这里看到:http://cl.ly/H5WI

问题是当选择的事件被触发时,所选的功能被调用两次？

我正在使用一个复合视图,其中$ .dialog调用了它的$ el.

然后,合成视图将列出集合中的项目.

现在我已经尝试了多种方式来渲染集合项:从复合视图外部获取它,然后将其附加到视图中,在视图内部获取,从我的服务器脚本预加载集合等等...

一切似乎都有效,但同样的问题发生..

一旦复合视图看到这个集合,它就会再次调用它自己的初始化函数......

我完全理解渲染函数将在集合重置或添加时调用...但是初始化??? 我完全不知道为什么会这样.

showCustomFieldSelect: function(e){

    log('triggered');

    e.preventDefault();

    var cl = new AustApp.Collections.CustomField;

    var select = new AustApp.Views.AvailableCustomFieldsList({
        el: "#available-custom-fields-popup",
        collection: cl
    });

    cl.fetch();


    cl.once("reset", function(){
        // this bind was
        // previously used for creating the view
        // or calling render functions directly
        // amongst numerous efforts to debug

    }, this);


},



MyApp.Views.AvailableCustomFieldsList = function(){

var AvailableCustomFieldsList = Backbone.Marionette.CompositeView.extend({

    template: "#available-contact-list-custom-field-list-js",

    tag: "div",

    itemView: AustApp.Views.AvailableCustomFieldsListItem,

    emptyView: AustApp.Views.EmptyAvailableCustomFieldsListItem,

    itemViewContainer: "ul",

    templateHelpers: viewHelpers,

    initialize: function(){
        log('init called'); …

Backbone 0.9.0更新日志说:

视图的事件哈希现在还可以包含直接函数值以及现有视图方法的字符串名称.

当我尝试以下操作时失败,说该事件的值是undefined.

var BB = Backbone.View.extend({
  'initialize': function() {

    this.$el.html('<input type="button" value="Click me!" />');
    jQuery('body').html(this.el);
  },

  'events': {
    'click input[type="button"]': this.buttonClicked
  },

  'buttonClicked': function() {
    alert('button clicked!');
  }

});

window.b = new BB()

我误解了这个新功能吗？有人可以解释它的工作方式与我的预期不同吗？也许这只是我在定义时的'this'的JavaScript语法/值.

我习惯做的方式仍然有效:

'events': {
  'click input[type="button"]': 'buttonClicked'
},

我有一个名为person的模特:

 var person = Backbone.Model.extend({
      initialize: function(){
        console.log('cool');
      },
      defaults:{
          names:['a','k','d','s','h','t']
      }
    })

现在我有一个观点:

var person_view = Backbone.View.extend({
   model : person,
   output: function(){
      console.log(this.model.get('names'))
   }
});

创建了视图的对象:

var obj = new person_view()

尝试访问名称:

obj.output()

但我得到了这个错误:

TypeError: Object function (){ parent.apply(this, arguments); } has no method 'get'

你能告诉我如何正确地做事吗？我刚刚开始了解backbone.js所以请耐心等待我.

无法显示,隐藏,然后重新显示木偶布局.我相信这个问题也适用于常规的Backbone Views和Marionette ItemViews.

总之,我有一个父视图.初始化时,它会创建两个子布局,用作选项卡内容.问题是,当显示来自一个选项卡的选项卡内容时,将显示来自另一个选项卡的内容,当再次显示原始选项卡内容时,事件不再起作用.

子布局initialize在父布局的功能中创建并重新使用,因为当导航移回它们时需要保留它们的状态.

这是一个示例应用程序,演示了我在说什么:

这是一段显示破碎事件的视频:视频链接

非常感谢!

我一直在做关于backbone.js中的嵌套视图的一堆阅读,我理解了很多,但有一点让我感到困惑的是这......

如果我的应用程序有一个shell视图,其中包含在使用应用程序过程中不会改变的页面导航,页脚等子视图,我是否需要为每个路径渲染shell或者我是否做某种检查视图以查看它是否已存在？

如果有人在应用程序中前进之前没有点击"主页"路线,那对我来说似乎是这样.

我在google搜索中没有找到任何有用的信息,所以任何建议都表示赞赏.

谢谢!

我有一个三个Backbone View类继承:

var preventRecursion = 0;

var parentView = Backbone.View.extend({

  initialize: function(){
    console.log('parentView');
  }
});

var nestedChildView = parentView.extend({

  initialize: function(){

    if (++preventRecursion == 5) {throw "Recursion"};

    console.log('nestedChildView');
    this.constructor.__super__.initialize.apply(this);          
  }
});

var nestedNestedChildView = nestedChildView.extend({

  initialize: function(){
    console.log('nestedNestedChildView');
    this.constructor.__super__.initialize.apply(this);          
  }
});

当我尝试创建nestedNestedChildView时:

var t = new nestedNestedChildView();

我得到无限递归:这是jsfiddle

我正在尝试设置<ul>元素的高度,宽度和背景图像.

这是我的Backbone.View所拥有的:

var RackView = Backbone.View.extend({

    tagName: 'ul',

    className: 'rack unselectable',

    template: _.template($('#RackTemplate').html()),

    render: function () {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },

    attributes: function () {
        var isFront = this.model.get('isFront');
        var imageUrlIndex = isFront ? 0 : 1;

        return {
            'background-image': 'url(' + this.model.get('imageUrls')[imageUrlIndex] + ')',
            'height': this.model.get('rows') + 'px',
            'width': this.model.get('width') + 'px'
        };
    }
}

这不起作用,因为属性不会写入元素的"样式"属性.相反,它们被视为属性...因为函数名称而有意义,但它让我想知道 - 我如何正确地实现这样的事情？

设置后图像,高度和宽度是不可变的,如果这有助于简化...

我只是以一种风格包裹我的回报吗？这似乎过于复杂......

这是生成的HTML:

<ul background-image="url(data:image/png;base64,...)" height="840px" width="240px" class="rack unselectable">
</ul>

编辑:这有效,但我没有激怒:

attributes: function () {

    var isFront = …

注意:据我所知,其他库(例如,Marionette)可以大大简化基于视图的问题.但是,我们假设这不是一个选项.

假设我们有一个给定"记录"(即模型)的父视图.该父视图有两个子视图,一个用于显示记录的属性,另一个用于编辑它们(假设在这种情况下编辑就地不合适).到目前为止,每当我需要删除/显示子视图时,我确实调用remove了传出视图和new传入视图,因此我每次都在销毁/创建它们.这很简单,易于编码/管理.

然而,似乎有必要弄清楚是否有任何可行的替代方法(看似默认的)删除/创建方法 - 特别是因为之前已被问过几次,但从未完全回答(例如,使用Backbone交换视图？)

所以我一直试图弄清楚如何让两个子视图在父视图中共享一个元素,从而阻止我每次都必须remove和new它们一起.当一个人需要活动时,它会被渲染而另一个被"沉默"(即,不响应事件).因此,它们会不断更换,直到删除父视图,然后将它们全部删除.

我想出的可以在这里找到:http://jsfiddle.net/nLcan/

注意:交换是在RecordView.editRecord和中执行的RecordView.onRecordCancel.

虽然这似乎工作得很好,但我有一些担忧:

(1)即使在"非活动"视图中事件绑定被静音,两个视图是否可能存在设置相同元素的问题？只要呈现"活动"视图,它似乎不应该是一个问题.

(2)当两个子视图remove调用(即Backbone.View.remove)时,它调用this.$el.remove.现在,当删除第一个子视图时,这实际上将删除它们共享的DOM元素.因此,当remove在第二个子视图上调用时,没有要删除的DOM元素,我想知道是否这可能使该子视图难以清理自己 - 特别是如果它本身已经创建了许多DOM元素,那么在第一个子视图被渲染时写入....或者如果涉及子视图...... 似乎可能存在关于内存泄漏的潜在问题.

抱歉,我知道这有点令人费解.我在知识库的边界是正确的,所以我不完全理解这里涉及的所有潜在问题(因此问题).但我确实希望有人处理类似的问题,并能就这一切提供明智的意见.

无论如何,这里是完整的(简化示例)代码:

// parent view for displaying/editing a record. creates its own DOM element.
var RecordView = Backbone.View.extend({
    tagName : "div",
    className : "record",
    events : {
        "click button[name=edit]" : "editRecord",
        "click button[name=remove]" : "removeRecord",
    },
    initialize : …

我正在阅读最新版本(2.3.0)的文档,它说应用程序区域现已弃用.

应用领域

警告:不建议使用此功能已弃用.您应该使用布局视图,而不是将应用程序用作视图树的根.要将布局视图范围限定为整个文档,可以将其el设置为"body".这可能类似于以下内容:var RootView = Marionette.LayoutView.extend({el:'body'});

在大多数教程中,包括David Sulc的书Backbone Marionette:A Gentle Introduction,它使用以下代码片段向应用程序添加区域.

而不是下面使用addRegions的示例,我应该做什么呢？

即

var ContactManager = new Marionette.Application({});
ContactManager.addRegions({
    mainRegion: "#main-region"
});

var ContactView = Marionette.ItemView.extend({
    template: "#whatever",
    ui: {
        button: ".button".
    },
    events: {
        "click @ui.button": "click",
    },
    click: function () {
        console.log("do stuff here...");
    }
});

ContactManager.on("start", function () {
    var contactView = new ContactView({
        model: someModel
    });
    ContactManager.mainRegion.show(contactView);
});