聚合物数据绑定辅助

时间:2015-07-29 19:39:32

标签: data-binding polymer polymer-1.0

我有一个聚合物页面,需要从Web服务中读取一些json。它涉及3个不同的表格:

projects will come from a url like api/users/1/projects/1: 

fields: 
    project_id, project_name, project_description, project_deadline,
    project_total_hours

Projects data: 
    1,'ABC Corp Web Site','Site Maintenance','2015-12-31',9


tasks will come from a url like api/users/1/projects/1/tasks

fields: 
    task_id, task_name, project_id(fk)

Tasks data: 
    1,'Update site with new style',1
    2,'Fix tables on contact,about us and bio pages',1


task_details will come from a url like like api/users/1/projects/1/tasks/1

fields:
    task_det_id, task_det_desc, task_id(fk)

Task_details data:
    1,'applied style to homepage',1
    2, 'applied style to privacy page',1
    2, 'applied style to contact page',1
    3, 'fixed main table on contact page',2

我需要显示的是:

Project name
(other project details here)
    Update Site with New Style
        applied style to homepage
        applied style to privacy page
        applied style to contact page
    Fix tables on contact,about us and bio pages
        fixed main table on contact page

我有一个url,它返回单个项目的数据,然后在dom-repeat中将其输出到我的页面。然后在其中我有另一个抓取链接到该项目的任务并显示它们并且到目前为止很好:下面是我过去做的代码:

<paper-material elevation="5" class="card">
<center>
<template is="dom-bind" id="project">
<iron-ajax url="<?echo $projecturl?>" last-response="{{projectdata}}" auto></iron-ajax>
    <template is="dom-repeat" items="[[projectdata]]" as="project">
        <div class="primary">[[project.project_name]]</div>
        <div class="primary">[[project.project_description]]</div>
        <div class="secondary">Project Deadline:</div>
        <div class="secondary dim">{{_getDeadline(project.project_deadline, project.project_deadline_time)}}</div>
        <div class="secondary">{{_getTotalHours(project.project_total_hours)}}</div>
        <paper-button id="my-button" raised onclick="">Create Task</paper-button>
        <hr>
        <iron-ajax url="<?echo $tasksurl?>" last-response="{{taskdata}}" auto></iron-ajax>
        <template is="dom-repeat" items="[[taskdata]]" as="taskitem">
            <div>[[taskitem.task_name]]</div>
        </template>
    </template> 
</template>
</center>

我的脚本(只是用文本连接一些字段):

<script>
    var project = document.getElementById('project');
    project._getProject = function (url) {
        return 'project.php?id=' + url
    }
    project._getTaskid = function (tid) {
        return 'task.php?id='  + tid;
    }
    project._getTaskurl = function (tid) {
        return '<?echo $tasksurl?>' + '/' + tid;
    }
    project._getDeadline = function (deadline, deadlinetime) {
        var timeString = deadlinetime;
        var H = +timeString.substr(0, 2);
        var h = H % 12 || 12;
        var ampm = H < 12 ? "AM" : "PM";
        timeString = h + timeString.substr(2, 3) + ampm;
        var d = deadline.slice(0, 10).split('-');   
        formatteddate=d[1] +'/'+ d[2] +'/'+ d[0]; // 10/30/2010
        return  formatteddate + ' at ' + timeString;
    }
    project._getTotalHours = function (totalhours) {
        return  'Total Hours to Date: '  + totalhours;
    }
</script>

显示:

Project name
(other project details here)
    Update Site with New Style
    Fix tables on contact,about us and bio pages

到目前为止一直很好......

现在我的问题出现在处理任务详细信息部分时,我目前有以下代码,并添加了额外的详细信息部分:

<template is="dom-repeat" items="[[projectdata]]" as="project">
    <div class="primary">[[project.project_name]]</div>
    <div class="primary">[[project.project_description]]</div>
    <div class="secondary">Project Deadline:</div>
    <div class="secondary dim">{{_getDeadline(project.project_deadline, project.project_deadline_time)}}</div>
    <div class="secondary">{{_getTotalHours(project.project_total_hours)}}</div>
    <paper-button id="my-button" raised onclick="">Create Task</paper-button>
    <hr>
    <iron-ajax url="<?echo $tasksurl?>" last-response="{{taskdata}}" auto></iron-ajax>
    <template is="dom-repeat" items="[[taskdata]]" as="taskitem">
    <div>[[taskitem.task_name]]</div>

    <iron-ajax url="{{_getTaskurl(taskitem.task_id)}}" last-response="{{taskdetaildata}}" auto></iron-ajax>
    <template is="dom-repeat" items="[[taskdetaildata]]" as="taskdetailitem">
        <div>[[taskdetailitem.task_det_desc]]</div>

    </template>
</template>

请注意,我需要从当前链接的任务中获取task_id以用于获取该任务的详细信息:{{_getTaskurl(taskitem.task_id)}}

每次刷新时,我实际上都会不断变化的结果:  有时我得到:

Project name
(other project details here)
    Update Site with New Style
        fixed main table on contact page
    Fix tables on contact,about us and bio pages
        fixed main table on contact page

其他时候我

Project name
(other project details here)
    Update Site with New Style
        applied style to homepage
        applied style to privacy page
        applied style to contact page
    Fix tables on contact,about us and bio pages
        applied style to homepage
        applied style to privacy page
        applied style to contact page

有时我得到:

Project name
(other project details here)
    Update Site with New Style
    Fix tables on contact,about us and bio pages

有谁知道如何做到这一点并获得理想的结果?我已经玩了大约一天左右而且无法使用它并且即将废弃它并且只是使用php和PDO循环并显示我需要的数据。我确定,因为我是一个聚合物菜鸟,它是我忽视或不理解的东西。我觉得它应该可以工作,我的意思是在项目细节之后所有任务都显示得很好,所以我想我是否按照它应该工作的方式执行任务细节但是没有。

1 个答案:

答案 0 :(得分:0)

看起来你正在遇到放置最后回应内容的竞争条件。

您需要异步思考解决方案。

我要做的是让iron-ajax调用一个处理程序来更新其他绑定变量。 Here is my JSBin I hacked together that demonstrates the solution...

我用帖子/评论代替你的任务,但想法是一样的。