{"action":"created","issue":{"url":"https://api.github.com/repos/mweststrate/mobservable/issues/31","labels_url":"https://api.github.com/repos/mweststrate/mobservable/issues/31/labels{/name}","comments_url":"https://api.github.com/repos/mweststrate/mobservable/issues/31/comments","events_url":"https://api.github.com/repos/mweststrate/mobservable/issues/31/events","html_url":"https://github.com/mweststrate/mobservable/issues/31","id":107858568,"number":31,"title":"How to constrain independent properties?","user":{"login":"kssreeram","id":134613,"avatar_url":"https://avatars.githubusercontent.com/u/134613?v=3","gravatar_id":"","url":"https://api.github.com/users/kssreeram","html_url":"https://github.com/kssreeram","followers_url":"https://api.github.com/users/kssreeram/followers","following_url":"https://api.github.com/users/kssreeram/following{/other_user}","gists_url":"https://api.github.com/users/kssreeram/gists{/gist_id}","starred_url":"https://api.github.com/users/kssreeram/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kssreeram/subscriptions","organizations_url":"https://api.github.com/users/kssreeram/orgs","repos_url":"https://api.github.com/users/kssreeram/repos","events_url":"https://api.github.com/users/kssreeram/events{/privacy}","received_events_url":"https://api.github.com/users/kssreeram/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2015-09-23T06:32:13Z","updated_at":"2015-09-23T11:10:46Z","closed_at":null,"body":"Let’s say I have a class `Point` defined like this:\r\n\r\n```\r\nclass Point {\r\n\tconstructor(x, y) {\r\n\t\textendReactive(this, {\r\n\t\t\tx: x,\r\n\t\t\ty: y\r\n\t\t});\r\n\t}\r\n}\r\n```\r\n\r\n`Point` has two independent observable properties `x` and `y`.\r\n\r\nFor a specific instance of `Point` I would like to constrain `y` so that it is always twice `x`. I’m currently doing it this way:\r\n\r\n```\r\nvar p = new Point(10, 20);\r\nsideEffect(() => {\r\n\tvar newY = p.x * 2;\r\n\tsetTimeout(() => {p.y = newY;}, 0);\r\n});\r\n```\r\n\r\nI’m using `setTimeout` because I can’t update the state inside a reactive-view. But it’s pretty clunky. Is there a better way to do this? I know I can use plain JS objects instead of custom classes, but in my actual scenario I need to use custom classes because they are more complex and have methods on them.\r\n\r\nThanks in advance!\r\n"},"comment":{"url":"https://api.github.com/repos/mweststrate/mobservable/issues/comments/142570601","html_url":"https://github.com/mweststrate/mobservable/issues/31#issuecomment-142570601","issue_url":"https://api.github.com/repos/mweststrate/mobservable/issues/31","id":142570601,"user":{"login":"mweststrate","id":1820292,"avatar_url":"https://avatars.githubusercontent.com/u/1820292?v=3","gravatar_id":"","url":"https://api.github.com/users/mweststrate","html_url":"https://github.com/mweststrate","followers_url":"https://api.github.com/users/mweststrate/followers","following_url":"https://api.github.com/users/mweststrate/following{/other_user}","gists_url":"https://api.github.com/users/mweststrate/gists{/gist_id}","starred_url":"https://api.github.com/users/mweststrate/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mweststrate/subscriptions","organizations_url":"https://api.github.com/users/mweststrate/orgs","repos_url":"https://api.github.com/users/mweststrate/repos","events_url":"https://api.github.com/users/mweststrate/events{/privacy}","received_events_url":"https://api.github.com/users/mweststrate/received_events","type":"User","site_admin":false},"created_at":"2015-09-23T11:10:46Z","updated_at":"2015-09-23T11:10:46Z","body":"There are no technical limitations at the moment that require the warning,\nit's merely a conceptual thing. So it is still up for discussion whether it\nshould be allowed from a functional point of view, not from a technical\npoint of view. In issue #30 we had the same kind of discussion, and it that\ncase it fitted nicely in pure views in the end. But if people keep running\ninto this limitation, maybe I make it a configurable flag. Note that the\nprinciples behind it are explained here:\nhttp://mweststrate.github.io/mobservable/intro/concepts.html\n\nYour errorMode example I would roughly solve as follow:\n\n```javascript:\nvar errorState = makeReactive({\n    value: null,\n    validator: null,\n    errorMode: function() {\n        if (!this.validator)\n             return false;\n        else\n             return !this.validator(this.value);\n    }\n}\n```\n\nAnd then simply:\n\n```\nerrorState.validator = isValidNumber;\nerrorState.value = \"hi\"\n```\n\nIf async communication gets into play, you could also use `observe`\n(previously called side effects) functions and merge the different inputs\nin `errorMode`:\n\n```javascript:\nvar errorState = makeReactive({\n    value: null,\n    validator: null,\n    errorMode: function() {\n        return this.validationError || this.emailIsInUse\n    },\n    validationError: function() {\n        if (!this.validator)\n             return false;\n        else\n             return !this.validator(this.value);\n    },\n    emailIsInUse: false\n}\n\n\nobserve(function() {\n   server.validateEmail(errorState.value, function(isInUse) {\n         // triggered async, so it is allowed to update state again.\n         errorState.emailIsInUse = isInUse;\n   });\n});\n```\n\nBtw, there is now also an `observeAsync` method that basically exposes your\noriginal timeout pattern, see the last comment in issue#28\n"}}