storkCore

Check-in [5974c11c45]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Version of StorkModel which uses object properties as model properties StorkModel has usually used a separate namespace for model properties, so as not to conflict with any property of Javascript objects. This causes some complexity but keeps things neat and separate. This version is an experiment in using the properties of the JS object directly as model properties. This simplifies some things but can cause namespace clashes with model property names and object property names.
Timelines: family | ancestors | modelPropsObProps
Files: files | file ages | folders
SHA1:5974c11c457ffc08b4967a673f1c61db472bfcc4
User & Date: setok 2018-02-06 10:02:43
Context
2018-02-06
10:02
Version of StorkModel which uses object properties as model properties StorkModel has usually used a separate namespace for model properties, so as not to conflict with any property of Javascript objects. This causes some complexity but keeps things neat and separate. This version is an experiment in using the properties of the JS object directly as model properties. This simplifies some things but can cause namespace clashes with model property names and object property names. Leaf check-in: 5974c11c45 user: setok tags: modelPropsObProps
09:31
Create new branch named "modelPropsObProps" check-in: 30c6659ff4 user: setok tags: modelPropsObProps
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to examples/linkModelToHtmlView.html.

38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
..
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
        with the person being Senna
        (in green borders):
      </p>
      <div id="newperson" style="border: solid 1px green;">
      </div>

      <p id="attrTest">
        <span id="changeattr" class="foo">Check class changed to "bar"</span>
      </p>

      <div id="imageviewer">
      <p>
        The following should show a Caterham 7:
      </p>
      <img id="showimg" src="" />
................................................................................
      <p id="random">
        Here's a random number: <span id="rndNumber"></span>.
      </p>

      <script type="text/javascript">
        // Set details of an example person. Basic link testing.
        var personView = clone(StorkHtmlView);
        personView.linkPropertyToText("name", "name");
        personView.linkPropertyToText("phone", "phone");
        personView.attach(elementByID("person"));

        StorkModel.setProperties({name: "Kris", phone: "04224242"});
        personView.setModel(StorkModel);

        var personView2 = clone(personView);
        personView2.appendToElement(elementByID("twinperson"));

        var differentPerson = clone(personView2);
        differentPerson.appendToElement(elementByID("newperson"));
        var differentModel = clone(StorkModel);
        differentModel.setProperty("name", "Senna");
        differentModel.setProperty("phone", "31337");
        differentPerson.setModel(differentModel);

        StorkModel.setProperty("name", "King");

        // Switch name of first (and thus second) person, every second
        var king = 1;
        setInterval(function() {
            if (king) {
                StorkModel.setProperty("name", "Setok");
            } else {
                StorkModel.setProperty("name", "King");
            }
            king = king ^ 1;
        }, 1000);

        // Test attribute linking
        var classChangeView = clone(StorkHtmlView);
        var model2 = clone(StorkModel);







|







 







|



|








|









|

|







38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
..
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
        with the person being Senna
        (in green borders):
      </p>
      <div id="newperson" style="border: solid 1px green;">
      </div>

      <p id="attrTest">
        <span id="changeattr" class="foo">Check class of this element changed to "bar"</span>
      </p>

      <div id="imageviewer">
      <p>
        The following should show a Caterham 7:
      </p>
      <img id="showimg" src="" />
................................................................................
      <p id="random">
        Here's a random number: <span id="rndNumber"></span>.
      </p>

      <script type="text/javascript">
        // Set details of an example person. Basic link testing.
        var personView = clone(StorkHtmlView);
        personView.linkPropertyToText("personName", "name");
        personView.linkPropertyToText("phone", "phone");
        personView.attach(elementByID("person"));

        StorkModel.setProperties({personName: "Kris", phone: "04224242"});
        personView.setModel(StorkModel);

        var personView2 = clone(personView);
        personView2.appendToElement(elementByID("twinperson"));

        var differentPerson = clone(personView2);
        differentPerson.appendToElement(elementByID("newperson"));
        var differentModel = clone(StorkModel);
        differentModel.setProperty("oersonName", "Senna");
        differentModel.setProperty("phone", "31337");
        differentPerson.setModel(differentModel);

        StorkModel.setProperty("name", "King");

        // Switch name of first (and thus second) person, every second
        var king = 1;
        setInterval(function() {
            if (king) {
                StorkModel.setProperty("personName", "Setok");
            } else {
                StorkModel.setProperty("personName", "King");
            }
            king = king ^ 1;
        }, 1000);

        // Test attribute linking
        var classChangeView = clone(StorkHtmlView);
        var model2 = clone(StorkModel);

Changes to storkCore.js.

896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
...
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
 * sets the value for a property in the model. It also calls method to inform
 * listeners about the property value change
 *
 * @param {string} key name of the property to set a value to
 * @param {Mixed} value value to set to the property
 */
StorkModel.setProperty = function(key, value) {
    var oldValue = this.modelProperties[key];
    this.modelProperties[key] = value;
    var values = {
        oldValue: oldValue,
        value: value
    };
    this._informListeners(key, oldValue, value);
};

................................................................................

/**
 * returns the value of a property
 *
 * @param {string} key name of the property to get the value from
 */
StorkModel.getProperty = function(key) {
    return this.modelProperties[key];
};


/**
 * returns true if the model has the property
 *
 * @param {string} key name of the property to get the value from
 * @return {Boolean} true if this has the property
 */
StorkModel.hasProperty = function(key) {
    if (this.modelProperties[key] != undefined) {
        return true;
    } else {
        return false;
    }
};









|
|







 







|










|







896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
...
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
 * sets the value for a property in the model. It also calls method to inform
 * listeners about the property value change
 *
 * @param {string} key name of the property to set a value to
 * @param {Mixed} value value to set to the property
 */
StorkModel.setProperty = function(key, value) {
    var oldValue = this[key];
    this[key] = value;
    var values = {
        oldValue: oldValue,
        value: value
    };
    this._informListeners(key, oldValue, value);
};

................................................................................

/**
 * returns the value of a property
 *
 * @param {string} key name of the property to get the value from
 */
StorkModel.getProperty = function(key) {
    return this[key];
};


/**
 * returns true if the model has the property
 *
 * @param {string} key name of the property to get the value from
 * @return {Boolean} true if this has the property
 */
StorkModel.hasProperty = function(key) {
    if (this[key] != undefined) {
        return true;
    } else {
        return false;
    }
};