Salesforce backbone.jsを使う B2B Commerce CloudCraze

こんにちは、管理人の@Salesforce.Zです。

SalesforceのB2B Commerceを使うと今のところでは、情報が少ないため、分かるものをメモします。

読んだら得ること

★　B2B Commerceの開発コツ
★　backbone.jsの基本使い方
★　B2B Commerceでのbackbone.jsの基本使い方

目次

B2B Commerce

開発したい場合、CloudCrazeという製品を使い、開発するです。

CloudCraze製品をSalesforce上での設定はここで略します。直接開発に移動します。

CloudCraze Event Handling

CloudCraze Event Handling機能はBackbone Functionsをベースにできた感じ、公式サイトも詳しく記載していないので使い方で困ったら、Backbone Functionsを詳しく調べるべき

公式サイトは　CloudCraze Event Handling　へ

Backbone Functions

Backbone Functions機能はBackbone.jsをベースにしているので、公式サイトも詳しく記載していないので使い方で困ったら、Backbone.jsを詳しく調べるべき

公式サイトは　Backbone Functions　へ

Backbone.js

Backbone.jsはクライアントサイドのMVCモデルです。Salesforceに慣れ親しんだら、やや不自然かもしれません。

特徴をいうと、最初の１回だけ同期通信を行い、 ２回目からは非同期通信を行うことで高速に表示できることがあります。 それとBackbone.jsが多用しているObserverパターンに則り コードを書くことで疎結合で拡張性の高いコードが出来上がります。

使い方はBackbone.js 使い方メモの記事へ参照してください。 公式サイトは　Backbone.js　へ

B2B Commerce流にBackbone.jsを使うには

基本、MVCを中心にサンプル出します。

M：Model

直接使用のM

var MyModel = Backbone.Model.extend({
    method: function() {
        console.log('Hello Model!!');
    }
});

var myModel = new MyModel();

myModel.method();

B2B Commerce流のM

var myModel = CCRZ.CloudCrazeModel.extend({
    method: function() {
        console.log('Hello Model!!');
    }
});
var myModel = new MyModel();

myModel.method();

笑笑笑

あまり変わらないですね。

V：View

直接使用のV

    var MyView = Backbone.View.extend({
        render: function() {
            this.$el.text('Hello View!!');
            return this;
        }
    });

    var myView = new MyView();

B2B Commerce流のV

    var MyView = CCRZ.CloudCrazeView.extend({
        initialize: function () {
            this.$el.html('insert text'); // 表示される
        }
    });
    var insMyview = new MyView({ el: '.your_tag_class_name' });

C：Controller

直接使用のC

var MyCollection = Backbone.Collection.extend({});

var myCollection = new MyCollection([
    {name: 'hoge'},
    {name: 'fuga'}
]);

myCollection.each(function(e, i) {
    console.log('[' + i + '] ' + e.get('name'));
});

B2B Commerce流のC

var MyCollection = CCRZ.CloudCrazeCollection.extend({});

var myCollection = new MyCollection([
    {name: 'hoge'},
    {name: 'fuga'}
]);

myCollection.each(function(e, i) {
    console.log('[' + i + '] ' + e.get('name'));
});

終わりに

リファレンス

CloudCraze Documentation

Backbone.js

Build Mobile Web Apps with Backbone.js and the Salesforce Platform