Javascript 动态淘汰模板模式潜在缺陷

我正在使用require和knockout创建一个类似dashboard的小部件，我想知道是否有人能看到我使用的方法的任何潜在缺点

我有一个带有模板的布局和一个自定义绑定（仪表板）：

注意：将仪表板绑定视为模板绑定的克隆，在仪表板项目可观察集合中添加/删除项目时，可以使用布局相关功能的帮助器

<!-- snip -->
    <div>
        <ul data-bind="dashboard: { templateName: 'dashboard-item', items: dashboardItems' }"></ul>
    </div>

    <script id="dashboard-item" type="text/html">
        <li>
            <div data-bind="component: { name: componentName, params: $data }"></div>
        </li>
    </script>

    <script id="dashboard-container" type="text/html">    
        <div class="dashboard-container">

            <!-- other ko templates common to all widgets -->    

            <!-- ko if: configMode -->
                <!-- this section is specific to each widget -->    
                <!-- ko template: configTemplateId --><!-- /ko -->
            <!-- /ko -->

            <!-- ko ifnot: configMode -->
                <!-- this section is specific to each widget -->    
                <!-- ko template: contentTemplateId --><!-- /ko -->
            <!-- /ko -->

            <!-- other ko templates common to all widgets -->    

        </div>
    </script>
<!-- /snip -->

我有一个通过require加载的组件：

<script data-bind="attr: { id: configTemplateId }" type="text/html">
    <!-- layout/content specific to this widget/section -->
</script>

<script data-bind="attr: { id: contentTemplateId }" type="text/html">
    <!-- layout/content specific to this widget/section -->
</script>

<div data-bind="template: 'widget-container'"></div>

所有组件视图模型都从基“类”继承：

<!-- snip -->
    function componentBase(config) {

        var self = this;

        self.configTemplateId = ko.observable("config_" + config.uid);
        self.contentTemplateId = ko.observable("content_" + config.uid);

    };
<!-- /snip -->

功能组件库（配置）{
var self=这个；
self.configTemplateId=ko.observable（“配置”+config.uid）；
self.contentTemplateId=ko.observable（“content_ux”+config.uid）；
};

情况就是这样：

主页加载包含“仪表板容器”模板的内容

组件视图模型将添加到仪表板上的可观察项

自定义组件加载程序使用require加载并绑定到组件的视图

组件viewmodel的configTemplateId和contentTemplateId绑定到其视图中脚本标记的id属性

KO从组件模板加载“dashboard component”模板，然后组件模板在viewmodel上查找配置和内容模板ID，并将其加载到“dashboard component”模板的相应区域中

我这样做的原因是因为所有小部件都共享相同的基本模型，所以我希望在一个位置（加载模板、配置模板等）配置一些公共方面/模板，这些方面/模板位于“小部件容器”中，但为了简洁/干净，从本文中删除

关键是，我不想在每个小部件模板中记住要包含什么以及在哪里散布这些内容，然后如果需要更改某些内容，就必须在每个小部件中进行更改

毕竟，问题很简单：当以这种方式使用ko模板绑定时，有人能看到任何潜在的问题吗？有人能想出更好的方法吗？也许有一种方法可以给tempalte绑定一个对占位符的引用，并将其注入其中

提前谢谢

---

Mike

当您有许多组件需要访问共享的中心资源时，例如数据api或中心应用程序状态，那么提前做一些规划是值得的

我有自己的格式——与其说是种子机，不如说是概念证明——它包括使用require的独立模块、同一页面上的多个组件、中心资源和组件之间的交互，还包括对babel-ES2015（新Javascript）的支持，并且非常受欢迎

一个示例组件：

const ko = require('knockout')
    , CentralData = require('../../service-providers/central-data')
    , CentralState = require('../../service-providers/central-state')
    , template = require('./template.html');

const viewModel = function (data) {

    //Make service providers accessible to data-bind and templates
    this.CentralData = CentralData;
    this.CentralState = CentralState;

    this.componentName = 'Component One';
    this.foo = ko.observable(`${this.componentName} Foo`);
    this.bar = ko.observableArray(this.componentName.split(' '));
    this.barValue = ko.observable("");
    this.bar.push('bar');
    this.addToBar = (stuffForBar) => {
        if(this.barValue().length >= 1) {
            this.bar.push(this.barValue());
            CentralData.pushMoreData({firstName: this.componentName,secondName:this.barValue()});
        }
    };
    this.CentralState.signIn(this.componentName);
    if (CentralData.dataWeRetrieved().length < 10) {
        var dataToPush = {firstName : this.componentName, secondName : 'Foo-Bar'};
        CentralData.pushMoreData(dataToPush);
    }
};
console.info('Component One Running');
module.exports = {
    name: 'component-one',
    viewModel: viewModel,
    template: template
};

const ko=require（'knockout'））
，CentralData=require（“../../service providers/central data”）
，CentralState=require（“../../service providers/central state”）
，template=require（'./template.html'）；
const viewModel=函数（数据）{
//使服务提供商可以访问数据绑定和模板
this.CentralData=CentralData；
this.CentralState=CentralState；
this.componentName='componentone'；
this.foo=ko.observable（`${this.componentName}foo`）；
this.bar=ko.observearray（this.componentName.split（“”））；
this.barValue=ko.可观察（“”）；
这个.bar.push（'bar'）；
this.addToBar=（stuffForBar）=>{
if（this.barValue（）.length>=1）{
this.bar.push（this.barValue（））；
CentralData.pushMoreData（{firstName:this.componentName，secondName:this.barValue（）}）；
}
};
this.CentralState.sign（this.componentName）；
if（CentralData.dataWeRetrieved（）.length<10）{
var dataToPush={firstName:this.componentName，secondName:'Foo Bar'}；
CentralData.pushMoreData（dataToPush）；
}
};
console.info（“组件一正在运行”）；
module.exports={
名称：“组件一”，
viewModel:viewModel，
模板：模板
};

以及一个示例服务提供商

const ko = require('knockout');

const CentralState = {
    signIn : componentName => signIn(componentName),
    signedInComponents : ko.observableArray([]),
};

const signIn = (componentName) => {
    if (CentralState.signedInComponents().indexOf(componentName) < 0) {
        CentralState.signedInComponents.push(componentName);
    }
};
console.info('Central State Running');
module.exports = CentralState;

const ko=require（'knockout'）；
常数中心状态={
signIn:componentName=>signIn（componentName），
签名组件：ko.observableArray（[]），
};
常量符号=（组件名称）=>{
if（CentralState.SignedComponents（）.indexOf（componentName）<0）{
CentralState.SignedComponents.push（componentName）；
}
};
console.info（“中央状态运行”）；
module.exports=CentralState；

---

您可以添加模型来管理特定的数据类型，并且您可能希望将您的配置程序作为一个中央服务提供商。

写得很好，考虑得很周全，但我担心这篇文章可能会偏离主题。你可以查看姐妹网站。（但是，要仔细检查他们的规则和常见问题，我不知道我什么时候推荐某人做得好。）如果你在代码审查中重新提出这个问题，我建议你用具体的例子而不是占位符注释来回答。值得一提的是，我认为你的方法没有任何错误。应该没问题。你知道，我从来没想过这个话题。感谢您指出这一点……我将查看代码审查，并确保按照您的建议检查常见问题解答中的规则@谢谢你的反馈。