javascript - Durandal 尝试从 viewmodel 文件夹访问 View

Question

我有一个组合绑定(bind)，当 durandal 试图找到它在 app/viewmodels 而不是 app/views 下的 View 时

虚拟机看起来像这样

define(["fields/fieldClosures"], function (fields) {
    var ctor = function(opt) {
        this.value = opt.value;
    };

    return fields.readonly.default = ctor;
});

使用组合绑定(bind)的 View

<div data-name="fields">
    <div data-bind="css: { 'has-error': hasError }" class="form-group">
        <label data-name="label" data-bind="attr: { 'for': id }" class="col-lg-3 control-label"></label>
        <div data-name="field" class="col-lg-9"></div>
    </div>
</div>

data-name="field" 通过 KO 配置库的约定转换为 data-bind="compose: field"。如果我直接使用标准组合绑定(bind)，我会得到相同的结果

更新:VM路径\App\viewmodels\form\fields\readonly\text.js

field 是持有对 VM 的引用的成员

这是持有字段成员的VM

define(["fields/fieldClosures",
    "fields/readonly/text", //Need to find a better way to load all view models with requirejs without specifying them all here 
    "fields/readonly/date",
    "fields/readonly/number"], function (fields) {
    function factory(closure, opt) {
        for (var index in closure) {
            var model = closure[index];
            if (model.can && model.can(opt == null ? null : ko.unwrap(opt.value))) {
                return model;
            }
        }

        return closure.default;
    }

    var id = 0;
    var ctor = function(label, value, canEdit, options) {
        this.id = "control-" + id++;
        this.label = label;
        var opt = { value: value, label: label, options: options };
        var closure = canEdit ? fields.editors : fields.readonly;
        var model = factory(closure, opt);

        this.field = new model(opt);

        this.field.id = this.id;
        this.hasError = canEdit ? ko.computed(this.getHasError, this) : null;
    };

    ctor.prototype = {
        getHasError: function() {
            return this.field.value.isValid && !this.field.value.isValid();
        }
    };

    return ctor;
});

已为 viewLocator 打开 useConvention，并且其他 View 正在工作，只是这个 View 无法正确加载。那么它不适用于以上述方式加载的任何 View

1. “字段/只读/文本”
2. “字段/只读/日期”
3. “字段/只读/数字”

引用是用工厂创建的，但是构造函数像正常一样注入(inject)了 requirejs

更新

fields是开始做时添加的路径

requirejs.config({
    paths: {
        'text': '../Scripts/text',
        'durandal': '../Scripts/durandal',
        'plugins': '../Scripts/durandal/plugins',
        'transitions': '../Scripts/durandal/transitions',
        "fields": "viewmodels/form/fields"
    }
});

Answer 1

您是否在 viewLocator 上启用了 useConvention？如果没有，默认情况下 durandal 将在与 viewModel 相同的路径中查找 View 。以下是执行翻译的 viewLocator 中的代码:

convertModuleIdToViewId: function(moduleId) {
    return moduleId;
}

如果您告诉 viewLocator 到 useConvention，它将强制执行您所指的 View /viewModels 设置。这是相关的源代码(为简洁起见进行了删减):

useConvention: function(modulesPath, viewsPath, areasPath) {
    modulesPath = modulesPath || 'viewmodels';
    viewsPath = viewsPath || 'views';

    var reg = new RegExp(escape(modulesPath), 'gi');

    this.convertModuleIdToViewId = function (moduleId) {
        return moduleId.replace(reg, viewsPath);
    };
}

另一种方法是使用您自己的 convertModuleIdToViewId 实现配置 View 定位器，并在应用程序的生命周期早期(例如，在应用程序入口点)将其连接起来:

var configureViewLocator = function () {
    var viewModelsRegex = /viewmodels/gi;

    viewLocator.convertModuleIdToViewId = function (moduleId) {
        return moduleId.replace(viewModelsRegex, "views");
    };
};

希望对您有所帮助。