Question

我完成了Aurelia.io的联系经理tut，并将其合并为任务经理，但我正在整理。下面的标记基于task.id === $ parent.id设置li类。

task-list.html

<template>
<div class="task-list">
    <ul class="list-group">
        <li repeat.for="task of tasks" class="list-group-item ${task.id === $parent.selectedId ? 'active' : ''}">
            <a route-href="route: tasks; params.bind: {id:task.id}" click.delegate="$parent.select(task)">
                <h4 class="list-group-item-heading">${task.name}</h4>
                <span class="list-group-item-text ">${task.due | dateFormat}</span>
                <p class="list-group-item-text">${task.isCompleted}</p>
            </a>
        </li>
    </ul>
</div>

task-list.js

@inject(WebAPI, EventAggregator)
export class TaskList {
    constructor(api, ea) {
        this.api = api;
        this.tasks = [];
        ea.subscribe(TaskViewed, x => this.select(x.task));
        ea.subscribe(TaskUpdated, x => {
            let id = x.task.id;
            let task = this.tasks.find(x => x.id == id);
            Object.assign(task, x.task);
        });
    }

    created() {
        this.api.getList().then( x => this.tasks = x);
    } 

    select(task) {
        this.selectedId = task.id;
        return true;
    }
}

如果我编辑当前任务，由...表示 task-detail.html

<template>
<require from="resources/attributes/DatePicker"></require>
<div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">Edit Task Profile</h3>
    </div>
    <div class="panel-body">
        <form role="form" class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10">
                    <input type="text" placeholder="name" class="form-control" value.bind="task.name">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">Description</label>
                <div class="col-sm-10">
                    <input type="text" placeholder="description" class="form-control" value.bind="task.description">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">Due Date</label>
                <div class="col-sm-10">
                  <div class="input-group date">
                    <input type="text" datepicker class="form-control" value.bind="task.due | dateFormat:'L'"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                  </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">Urgency</label>
                <div class="col-sm-10">
                    <input type="range" min="1" max="5" step="1" class="form-control" value.bind="task.urgency">
                </div>
            </div>
        </form>
    </div>
</div>

<div class="button-bar">
    <button class="btn btn-info" click.delegate="addTask(task)" >Add New</button>
    <button class="btn btn-success" click.delegate="save()" disabled.bind="!canSave">Save Edit</button>
</div>

</template>

task-detail.js

@inject(WebAPI, EventAggregator, Utils, DialogService)
export class TaskDetail {

constructor(api, ea, utils, dialogService) {
    this.api = api;
    this.ea = ea;
    this.utils = utils;
    this.dialogService = dialogService;
}

    activate(params, routeConfig) {
        this.routeConfig = routeConfig;

        return this.api.getTaskDetails(params.id).then(task => {
            this.task = task;
            this.routeConfig.navModel.setTitle(task.name);
            this.originalTask = this.utils.copyObj(task);
            this.ea.publish(new TaskViewed(task));
        });
    }

    get canSave() {
        return this.task.name && !this.api.isRequesting;
    }

    save() {
        console.log(this.task);
        this.api.saveTask(this.task).then(task => {
           this.task = task;
           this.routeConfig.navModel.setTitle(task.name);
           this.originalTask = this.utils.copyObj(task);
           this.ea.publish(new TaskUpdated(this.task));
        });
    }

    canDeactivate() {
        if (!this.utils.objEq(this.originalTask, this.task)) {
            let result = confirm('You have unsaved changes. Are you sure you wish to leave?');

            if (!result) {
                this.ea.publish(new TaskViewed(this.task));
            }
            return result;
        }
        return true;
    }

    addTask(task) {
        var original = this.utils.copyObj(task);
        this.dialogService.open({viewModel: AddTask, model: this.utils.copyObj(this.task)})
            .then(result => {
                if (result.wasCancelled) {
                    this.task.name = original.title;
                    this.task.description = original.description;
                }
        });
    }
}

如果某个值已更改，则不允许导航离开当前任务，这样就可以了 - 也就是说，UI的联系人详细信息部分不会更改。但是，尝试导航到的任务<li>仍然会应用活动类。这不应该发生。

如果我在开发工具中一步一步，在Aurelia.io联系人管理器上，我看到活动类被简单地应用于列表项，然后就消失了。

来自联系人管理员的contact-list.js这是在点击<li>时没有选择之前的项目时运行的。

  select(contact) {
    this.selectedId = contact.id;
    console.log(contact);
    return true;
  }

记录

Object {__observers__: Object}
Object {id: 2, firstName: "Clive", lastName: "Lewis",   email: "lewis@inklings.com", phoneNumber: "867-5309"}

我的任务管理器上的相同代码（显然“联系人”替换为任务“）task-list.js日志

Object {description: "Meeting With The Bobs", urgency: "5", __observers__: Object}
Object {id: 2, name: "Meeting", description: "Meeting With The Bobs", due: "2016-09-27T22:30:00.000Z", isCompleted: false…}

Answer 1

我的第一直觉是说它与this.selectedId = contact.id

有关

this会提到我假设的是一个名为select的函数（看起来你的示例中缺少function关键字？）或全局对象（即{{1} }}）

window

Answer 2

修正了它。它没有工作，因为我启用了pushstate。这清除了事情。谢谢therealklanni。

Aurelia问题设置基于obj.id === $ parent.selectedId的元素类

2 个答案: