获取配置 JSON 的主干和最佳实践

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 的新手，我想知道哪个是获取 JSON 文件的最佳方法，使用 JSON 的 url 创建一个模型，而不是使用解析和初始化创建另一个模型和集合（带有答案），还是使用 $.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 });
}

如果你的逻辑很简单，你可以有一个从配置到视图类的字典映射：

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”来提取通用逻辑并使用扩展来使您的代码更OO：

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

所以如果有人试图添加一个新的 ContentView，他/她只需要在工厂中添加一些代码，以使新的 View 由 config 生成。然后扩展 ContentViewMixin 来实现新的 View。