Windows Azure + DevExpress (Phone Is) 获取 ToDo 列表（标准示例）

Question

我开始学习 azure phonejs。 Todo list get through a standard example:

$(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();

});

而且有效！更改为使用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;

};

我可以轻松地将项目添加到程序列表中，但是从服务器列表中没有出现:-( 被逼得筋疲力尽，3天都解决不了问题，这对我来说很关键！说明我哪里错了！谢谢你！

Answer 1

我建议您使用 DevExpress.data.DataSource 和 DevExpress.data.CustomStore 而不是 ko.observableArray。

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;

}

您可以阅读更多相关信息 here and here。

Windows Azure + DevExpress (Phone Is) 获取 ToDo 列表（标准示例）

Windows Azure + DevExrpess (PhoneJs) getting ToDoList (Standart Sample)

javascript

azure

knockout.js

phonejs

devextreme