Question

我有一个看起来像这样的JSON文件。

{   
    "config": {
        "setting1": 'blabla',
        "setting2": 'blablabla'
    },
    "content": {
        "title": "Title of an exercise.",
        "author": "John Doe",
        "describtion": "Exercise content."
    },
    "answers": [
        {
            "id": "1",
            "content": "Dog",
            "correct": true
        },
        {
            "id": "2",
            "content": "Fish",
            "correct": false
        }
    ]
}

然后，我创建一个Backbone View，结合内容模型和答案（随机选择，但现在不是最重要的）。

我还有一个配置，它有一些设置可以确定要使用的视图和集合方法。

这似乎是一个简单的任务，但由于我是Backbone的新手，我想知道哪个是获取JSON文件的最佳方式，创建一个带有url到JSON的模型，而不是使用parse并初始化创建另一个模型和集合（带答案），或使用$ .getJSON方法，它将创建我需要的模型？

我正在尝试使用$ .getJSON

$.getJSON(source, function(data) {
    var contentModel = new ContentModel(data.content);
    var contentView = new ExerciseView({ model: contentModel });

    var answerCollection = new AnswersCollection();
    _.each(data.answers, function(answer) {
            answerCollection.add(answer);
    });

    var answersView = new AnswersView({collection: answerCollection});

    $(destination).html( contentView.render().el );
    $('.answers').append( answersView.el );
)};

但它似乎并不是非常优雅的解决方案，我知道这个应用程序需要良好的架构，因为它将基于'config'与许多其他视图一起开发。

希望你们给我一些建议，祝你有个美好的一天！

Answer 1

我认为你所做的工作很好并且是正确的。但是你可能需要重构一点，因为“它将基于'config'与许多其他视图一起开发”。

恕我直言，你需要做的第一件事就是处理你的getJson回调中的失败，使这个过程更加健壮。

其次，创建工厂来生成视图很有用，因为您的逻辑是根据服务器的配置数据生成不同的视图。工厂也许可以：

contentViewFactory.generate = function(data) {
    var config = data.config;
    ....
    var ActualContentView = SomeContentView;
    var contentModel = new ContentModel(data.content);
    return = new ActualContentView({ model: contentModel });
}

如果您的逻辑很简单，您可以从配置到视图类的dict映射，如：

var viewMaps = {
    "exercise" : ExerciseView,
    "other": SomeOtherView,
    //....
}

如果每个工作流都有AnswersView，您可以将其保留在getJSON回调中。所以也许现在你的getJSON看起来像这样：

$.getJSON(source, function(data) {
    // keep the config->view logic in the factory
    var contentView = contentViewFactory.generate(data);

    var answerCollection = new AnswersCollection();
    _.each(data.answers, function(answer) {
        answerCollection.add(answer);
    });

    var answersView = new AnswersView({collection: answerCollection});

    $(destination).html( contentView.render().el );
    $('.answers').append( answersView.el );
})
.fail(){
    //some failure handling
};

此外，如果您在“ContentView”中有常见的逻辑，那么您可以使用“BaseContentView”或“ContentViewMixin”来提取常用逻辑并使用extends来使您的代码更加OO：

Backbone.View.extend(_.extend({}, ContentViewMixin, {
    //.....
}

因此，如果有人试图添加新的ContentView，他/她只需要在工厂中添加一些代码，以便通过config生成新的View。然后扩展ContentViewMixin以实现新的View。

Backbone和获得配置JSON的最佳实践

1 个答案: