SproutCoreパート2の概要

SproutCoreチュートリアルの最初の部分では、単純なアプリケーションの作成について説明しました。

知識を深め、SproutCoreのモデルに対処する時が来ました。



このマニュアルを読むと、次のことができるようになります。

• SC.Recordを使用してモデルを記述します。
• SC.Storeでモデルを管理します。
• 初期データをストレージにロードします。
• SC.Queryを使用してストレージクエリを送信します。

1アプリケーションの準備

このチュートリアルの最初の部分では、単純なTodo-Listアプリケーションの作成方法について説明しました。

これで、モデル、ビュー、コントローラーを記述する方法、およびバインディングを使用して相互作用を定義する方法がわかりました。

ただし、ページ更新の間に情報を保存する機能はありませんでした。



これを実装する1つの方法は、SproutCoreのデータウェアハウスを使用してレコードを管理することです。

SC.Storeインスタンスは、レコードのライフサイクルを管理します。

SC.Storeは、SC.DataSourceを使用して、サーバーからダウンロードしたデータを処理し、サーバーに送り返す準備をします。



このガイドの最初の部分のアプリケーションがまだある場合は、それを使用してください。

そうでない場合は、GitHubからダウンロードできます。



ストレージを使用するには、アプリケーションに使用されるモジュールのリストにストレージを含める必要があります。

使用されるモジュールは、configセクションのBuildfileで指定されます。

config :all, :required => ["sproutcore/core_foundation", "sproutcore/datastore"], :theme => "sproutcore/empty_theme"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2モデル定義

前回のレッスンでは、モデルをSC.Objectのサブクラスとして定義し、SC.Recordを使用してモデルを再定義しました。

apps / todos / todos.jsファイルのコードを変更します。

 Todos.Todo = SC.Record.extend({ title: SC.Record.attr(String), isDone: SC.Record.attr(Boolean, { defaultValue: NO }) });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、モデルの基本クラスとしてSC.Recordを使用します。 モデル属性とそのタイプも定義しました。

タイトルは常に文字列に変換され、isDoneはブール変数に変換されます。 また、isDoneはデフォルトでfalseになりました。

特に指定がない限り。

3静的ソースデータセットの作成

バックエンドサーバーに接続せずに開発を開始する最も簡単な方法は、ソースデータの静的セットを使用することです。

静的コレクションは、各レコードを表すデータハッシュの配列です。

このようなセットを作成しましょう。そのために、モデルの説明の後にapps / todos / todos.jsファイルに次のコードを追加します。

 Todos.Todo.FIXTURES = [ { "guid": "todo-1", "title": "Build my first SproutCore app", "isDone": false }, { "guid": "todo-2", "title": "Build a really awesome SproutCore app", "isDone": false }, { "guid": "todo-3", "title": "Next, the world!", "isDone": false } ];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これでモデルと初期データができましたが、アプリケーションを実行した場合、変更は表示されません。

実際、SC.Storeはデータの読み込みを担当しています。 アプリケーションのデータウェアハウスを作成するコードをコントローラーに追加します。

apps / todos / todos.jsファイルで、次のように記述します。

 //         Todos = SC.Application.create({ store: SC.Store.create().from(SC.Record.fixtures) });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アプリケーションのデータウェアハウスを作成しました。 今のところ、静的ソースデータを使用しますが、それは引数として可能になります

from（）関数は、実際のデータソースを示します。



アプリケーションの動作を確認しましょう。 sc-serverコマンドを実行して、 http：// localhost：4020 / todosをブラウザーで開きます 。

ブラウザのjavascriptコンソールで、次のコマンドを記述します。

 records = Todos.store.find(Todos.Todo) records.objectAt(0).get('title')
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果が得られます。

 // => "Build my first SproutCore app"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

リポジトリのfind（）メソッドを呼び出し、すべてのレコードをSC.RecordArrayクラスのインスタンスとして返します。

新しいレコードを作成すると、自動的にリポジトリに追加されます。また、レコードが破棄されると、リポジトリから消えます。

4コントローラーとストレージバンドル

これで、アプリケーションのコントローラーのストレージを使用できます。 これを行うには、Todos.todoListControllerオブジェクトのcontentプロパティを設定します

ストアのfind（）関数によって返される値。 これは、SC.ready（）関数のコールバックで実行できます。



apps / todos / todos.jsファイルのコードを次のように変更します。

 SC.ready(function() { Todos.mainPane = SC.TemplatePane.append({ layerId: 'todos', templateName: 'todos' }); var todos = Todos.store.find(Todos.Todo); Todos.todoListController.set('content', todos); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アプリケーションのページを更新すると、リポジトリにアップロードした初期データが表示されることは明らかです。

次に、apps / todos / todos.jsファイルに新しいタスクを作成するための関数を次のように書き換えます。

 createTodo: function(title) { Todos.store.createRecord(Todos.Todo, { title: title }); },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最後に、apps / todos / todos.jsファイルのタスク削除機能を変更します。

 Todos.todoListController = SC.ArrayController.create({ // ... clearCompletedTodos: function(){ this.filterProperty('isDone', true).forEach( function(item) { item.destroy(); }); }, // ... )};
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、アプリケーションは完全に機能し、データウェアハウスを使用して作業します。

リポジトリは、JSONメッセージングを介して問題なくバックエンドサーバーに接続します。



オリジナル記事