Question

我对JavaScript很新，对Backbone.js来说还是全新的。

在下面的代码中，我创建了一个新的UserLocationModel并将此模型实例传递给新的UserLocationView对象。在此视图中initialize()我（尝试）将render()绑定到传递给模型的任何更改。

我非常肯定模型会发生变化，我会从navigator.geolocation收到新的纬度和经度值，并将这些值分配给模型的值。我也知道视图成功接收模型（this.model永远不会为null）。

为什么没有调用UserLocationView.render（）？

型号：

var UserLocationModel = Backbone.Model.extend({
    defaults: {
        latitude: -1,
        longitude: -1
    },

    updateLocation: function() {
        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(this.positionSuccess, this.positionFailure);
                    }
    },

    positionSuccess: function(position) {
        this.set({ 
            latitude : position.coords.latitude,
            longitude : position.coords.longitude
        });
    },

    positionFailure: function() {
        ...
    }
});

查看：

var UserLocationView = Backbone.View.extend({
    initialize: function(){
        _.bindAll(this,'render');
        if(this.model) this.model.on('change',this.render,this);
    },
    render: function(){
        console.log('UserLocationView render called.');
        ...
    }
});

执行开始：

window.MyApp = Backbone.View.extend({

    initialize: function() {
        userLocationModel = new UserLocationModel();
        userLocationView = new UserLocationView({ model: userLocationModel });
        userLocationModel.updateLocation();
        this.render();
    }
});

修改

我已经重写了上面的一些代码，包括model.set。

编辑2：关于moxn的其他信息。

main.js：

define(['jquery', 'underscore', 'backbone','template', 'myapp'], function() {
    $(document).ready(function() {
        window.App = new MyApp({ appendTo: $('body') });
    });
});

在HTML中调用

<script data-main="../static/js/main" src="../static/js/vendor/require.js"></script>

Answer 1

除了使用Dennis Rongo建议的set方法之外，还需要确保在调用this时positionSuccess是模型对象。所以像这样：

updateLocation: function() {
    if(navigator.geolocation) {
        var self = this;
        navigator.geolocation.getCurrentPosition(function() { self.positionSuccess() },
                                                 function() { self.positionFailure() });
    }
},

Answer 2

getCurrentPosition更改地理位置this的上下文。

尝试做类似的事情：

updateLocation: function() {
        if(navigator.geolocation)
            navigator.geolocation.getCurrentPosition(
              this.positionSuccess.call(this), 
              this.positionFailure.call(this));
    },

Answer 3

我确定丹尼斯＆＃39;林恩的答案也是有效的，我还没有能够让它们发挥作用。

的工作原理是：

方法A：

    updateLocation: function() {
        console.log('UserLocationModel.getLocation() called.');
        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(_.bind(this.positionSuccess, this));
        }
    },

    positionSuccess: function(position) {
        this.set({ 
            latitude : position.coords.latitude,
            longitude : position.coords.longitude
        });
    },

方法B：

    //in model
    initialize: function() {
        _.bindAll(this,'positionSuccess');
    },

更具体地说，我使用了underscore.js＆＃39; _.bind()或_.bindAll()：

bind（）将一个函数绑定到一个对象，这意味着无论何时调用该函数，它的值都将是该对象。（可选）将参数绑定到函数以预填充它们，也称为部分应用程序。

你的答案给了我理解力去寻找并在Pass correct "this" context to setTimeout callback?

中找到确切的答案

骨干视图渲染没有被模型更改调用，虽然绑定？

3 个答案: