Javascript windowsazure+；DevExrpess（PhoneJs）获得ToDoList（标准示例）

我开始学习和使用azure phonejs。 待办事项列表通过一个标准示例：

$(function() {
var client = new WindowsAzure.MobileServiceClient('https://zaburrito.azure-mobile.net/', 'key');
var todoItemTable = client.getTable('todoitem');

// Read current data and rebuild UI.
// If you plan to generate complex UIs like this, consider using a JavaScript templating library.
function refreshTodoItems() {
    var query = todoItemTable.where({ complete: false });

    query.read().then(function(todoItems) {
        var listItems = $.map(todoItems, function(item) {
            return $('<li>')
                .attr('data-todoitem-id', item.id)
                .append($('<button class="item-delete">Delete</button>'))
                .append($('<input type="checkbox" class="item-complete">').prop('checked', item.complete))
                .append($('<div>').append($('<input class="item-text">').val(item.text)));
        });

        $('#todo-items').empty().append(listItems).toggle(listItems.length > 0);
        $('#summary').html('<strong>' + todoItems.length + '</strong> item(s)');
    }, handleError);
}

function handleError(error) {
    var text = error + (error.request ? ' - ' + error.request.status : '');
    $('#errorlog').append($('<li>').text(text));
}

function getTodoItemId(formElement) {
    return $(formElement).closest('li').attr('data-todoitem-id');
}

// Handle insert
$('#add-item').submit(function(evt) {
    var textbox = $('#new-item-text'),
        itemText = textbox.val();
    if (itemText !== '') {
        todoItemTable.insert({ text: itemText, complete: false }).then(refreshTodoItems, handleError);
    }
    textbox.val('').focus();
    evt.preventDefault();
});

// Handle update
$(document.body).on('change', '.item-text', function() {
    var newText = $(this).val();
    todoItemTable.update({ id: getTodoItemId(this), text: newText }).then(null, handleError);
});

$(document.body).on('change', '.item-complete', function() {
    var isComplete = $(this).prop('checked');
    todoItemTable.update({ id: getTodoItemId(this), complete: isComplete }).then(refreshTodoItems, handleError);
});

// Handle delete
$(document.body).on('click', '.item-delete', function () {
    todoItemTable.del({ id: getTodoItemId(this) }).then(refreshTodoItems, handleError);
});

// On initial load, start by fetching the current data
refreshTodoItems();

$（函数（）{
var client=新的WindowsAzure.MobileServiceClient（'https://zaburrito.azure-mobile.net/","键",；
var todoItemTable=client.getTable（'todoitem'）；
//读取当前数据并重建UI。
//如果您计划生成这样的复杂UI，请考虑使用JavaScript模板库。
函数refreshtToDoItems（）{
var query=todoItemTable.where（{complete:false}）；
query.read（）.then（函数（todoItems）{
var listItems=$.map（todoItems，函数（项）{
返回$（“
”）
.attr（'data-todoitem-id'，item.id）
.append（$（'Delete'））
.append（$（''）.prop（'checked'，item.complete））
.append（$（''）.append（$（''）.val（item.text））；
});
$（'#todo items'）.empty（）.append（listItems）.toggle（listItems.length>0）；
$（“#summary”）.html（“”+todoItems.length+”项）；
}，handleError）；
}
函数句柄错误（错误）{
var text=error+（error.request？'-'+error.request.status:“”）；
$（'#errorlog'）。追加（$（'
'）。文本（text））；
}
函数getTodoItemId（formElement）{
返回$（formElement）.closest（'li'）.attr（'data-todoitem-id'）；
}
//手柄插入件
$（“#添加项”）.submit（函数（evt）{
var textbox=$（“#新项目文本”），
itemText=textbox.val（）；
如果（itemText！=''）{
插入（{text:itemText，complete:false}）；
}
textbox.val（“”）.focus（）；
evt.preventDefault（）；
});
//句柄更新
$（document.body）.on（'change'，'.item text'，function（））{
var newText=$（this.val（）；
update（{id:getTodoItemId（this），text:newText}）；
});
$（document.body）.on（'change'，'.item complete'，function（））{
var isComplete=$（this.prop（'checked'）；
update（{id:getTodoItemId（this），complete:isComplete}）；
});
//句柄删除
$（document.body）。在（'单击'，'项删除'）上，函数（）{
del（{id:getTodoItemId（this）}）；
});
//在初始加载时，从获取当前数据开始
refreshTodoItems（）；

}))

而且它有效！ 更改为使用phonejs，程序停止工作，即使错误也不会出现

这是我的看法：

<div data-options="dxView : { name: 'home', title: 'Home' } " >
<div class="home-view"  data-options="dxContent : { targetPlaceholder: 'content' } " >
    <button data-bind="click: incrementClickCounter">Click me</button>
    <span data-bind="text: listData"></span>
    <div data-bind="dxList:{
            dataSource: listData,
            itemTemplate:'toDoItemTemplate'}">
        <div data-options="dxTemplate:{ name:'toDoItemTemplate' }">
            <div style="float:left; width:100%;">
                <h1 data-bind="text: name"></h1>
            </div>
        </div>
    </div>
</div>

点击我

这是我的ViewModel：

Application1.home = function (params) {
var client = new WindowsAzure.MobileServiceClient('https://zaburrito.azure-mobile.net/', 'key');
var todoItemTable = client.getTable('todoitem');

var toDoArray = ko.observableArray([
    { name: "111", type: "111" },
    { name: "222", type: "222" }]);

var query = todoItemTable.where({ complete: false });
query.read().then(function (todoItems) {
    for (var i = 0; i < todoItems.length; i++) {
        toDoArray.push({ name: todoItems[i].text, type: "NEW!" });
    }
});

var viewModel = {
    listData: toDoArray,
    incrementClickCounter: function () {
        todoItemTable = client.getTable('todoitem');
        toDoArray.push({ name: "Zippy", type: "Unknown" });
    }
};

return viewModel;

Application1.home=函数（参数）{
var client=新的WindowsAzure.MobileServiceClient（'https://zaburrito.azure-mobile.net/","键",；
var todoItemTable=client.getTable（'todoitem'）；
var toDoArray=ko.array([
{名称：“111”，类型：“111”}，
{名称：“222”，类型：“222”}）；
var query=todoItemTable.where（{complete:false}）；
query.read（）.then（函数（todoItems）{
for（var i=0；i

})

我可以轻松地将项目添加到程序列表中，但服务器列表中没有：-（ 我已经精疲力竭了，三天都不能解决这个问题，这对我来说是至关重要的！

---

指定我的错误所在！谢谢！

我建议您使用

DevExpress.data.DataSource

和

DevExpress.data.CustomStore

而不是

ko.observearray

Application1.home = function (params) {
    var client = new WindowsAzure.MobileServiceClient('https://zaburrito.azure-mobile.net/', 'key');
    var todoItemTable = client.getTable('todoitem');

    var toDoArray = [];        
    var store = new DevExpress.data.CustomStore({
      load: function(loadOptions) {
        var d = $.Deferred();
        if(toDoArray.length) {
            d.resolve(toDoArray);
        } else { 
           todoItemTable
               .where({ complete: false })
               .read()
               .then(function(todoItems) {
                   for (var i = 0; i < todoItems.length; i++) {
                       toDoArray.push({ name: todoItems[i].text, type: "NEW!" });
                   }
                   d.resolve(toDoArray);
               });
        }
        return d.promise();
      },

      insert: function(values) {
        return toDoArray.push(values) - 1;
      },

      remove: function(key) {
        if (!(key in toDoArray))
          throw Error("Unknown key");

        toDoArray.splice(key, 1);
      },

      update: function(key, values) {
        if (!(key in toDoArray))
          throw Error("Unknown key");
        toDoArray[key] = $.extend(true, toDoArray[key], values);
      }
    });

    var source = new DevExpress.data.DataSource(store);
    // older version
    store.modified.add(function() { source.load(); });
    // starting from 14.2:
    // store.on("modified", function() { source.load(); });

    var viewModel = {
        listData: source,
        incrementClickCounter: function () {
            store.insert({ name: "Zippy", type: "Unknown" });
        }
    };

    return viewModel;

}

Application1.home=函数（参数）{
var client=新的WindowsAzure.MobileServiceClient（'https://zaburrito.azure-mobile.net/","键",；
var todoItemTable=client.getTable（'todoitem'）；
var toDoArray=[]；
var store=新DevExpress.data.CustomStore({
加载：函数（加载选项）{
var d=$.Deferred（）；
如果（toDoArray.length）{
d、 解决（toDoArray）；
}否则{
todoItemTable
.where（{complete:false}）
.读（）
.then（函数（todoItems）{
for（var i=0；i

---

您可以阅读更多关于它的信息。

它不适用于我。列表不显示，元素已添加，您只编写了所有代码？此列表不响应数据的更改。如何更改视图以显示数据？我刚刚为您制作了一个示例，请看：查看

DevExpress.data.DataSource

类的用法和

store

的

modified

事件。非常感谢您的帮助。但是Azure和PhoneJs对我不起作用。这是我的项目，我求求您