小胡子 JS 有条件地显示 DOM

Question

我正在使用 navigo and mustache 构建单页应用程序，但运行遇到了有条件地显示 DOM.

的问题

这是我的小胡子模板：

<script id="interface-upsert" type="x-tmpl-mustache">
    <a href="#/" class="btn btn-primary btn-sm my-3" role="button">&larr; Go Back</a>
    <form class="border rounded p-4 mb-3">
        <fieldset>
            <legend>{{ title }}</legend>
            <div class="form-row">
                <div class="col-xs-12 col-sm-6 form-group">
                    <label>First Name</label>
                    <input type="text" class="form-control" placeholder="First name" value="{{ firstName }}" />
                </div>
                <div class="col-xs-12 col-sm-6 form-group">
                    <label>Last Name</label>
                    <input type="text" class="form-control" placeholder="Last name" value="{{ lastName }}" />
                </div>
                <div class="col-xs-12 col-sm-6 form-group">
                    <label>Email</label>
                    <input type="email" class="form-control" placeholder="Email" value="{{ email }}" />
                </div>
                {{#id}}
                <div class="col-12 form-group">
                    <button type="submit" class="btn btn-success mr-1">Update</button>
                    <button type="reset" class="btn btn-outline-secondary">Reset</button>
                    {{#isActive}}
                    <button type="button" class="btn btn-outline-danger">Deactivate</button>
                    {{/isActive}}
                    {{^isActive}}
                    <button type="button" class="btn btn-outline-primary">Reactivate</button>
                    {{/isActive}}
                </div>
                {{/id}}
                {{^id}}
                <div class="col-12 form-group">
                    <button type="submit" class="btn btn-success mr-1">Create</button>
                    <button type="reset" class="btn btn-outline-secondary">Reset</button>
                </div>
                {{/id}}
            </div>
        </fieldset>
    </form>
</script>

这是我的 navigo 路由器设置：

var router = new Navigo(null, true, '#');
router
    .on('/create', function () {
        var viewModel = {
            id: null,
            firstName: '',
            lastName: '',
            email: '',
            isActive: true
        };
        var template = document.getElementById('interface-upsert').innerHTML;
        var rendered = Mustache.render(template, { title: 'Create User' });
        $('#interface-layout').html(rendered);
    })
.resolve();

我希望当我的视图模型中的 id 属性为 false 时，更新、重置以及停用或重新激活按钮可见。相反，当 id 属性设置为 true 时，将显示创建和重置按钮。

但是，现在发生的情况是它始终显示它，就好像 id 设置为真值（如 1）。我错过了什么吗？

Answer 1

我能够弄清楚我的问题。我传递的是 object { title: 'Create User' } 而不是视图模型。为了解决这个问题，我更改了我的视图模型以包含标题，并在渲染模板时传递了视图模型，如下所示：

var viewModel = {
    title: 'Create User',
    id: null,
    firstName: '',
    lastName: '',
    email: '',
    isActive: true
};
var template = document.getElementById('interface-upsert').innerHTML;
var rendered = Mustache.render(template, viewModel);
$('#interface-layout').html(rendered);

小胡子 JS 有条件地显示 DOM

MustacheJS Conditionally Show DOM

jquery

mustache